Open een URL in een nieuw tabblad of venster door op de knop te klikken in JavaScript

In JavaScript kunt u de window.open() . gebruiken methode om een ​​URL in een nieuw tabblad te openen door op de knop te klikken. Het opent een nieuw tabblad of een nieuw browservenster, afhankelijk van de browserinstellingen en de doorgegeven parameters.

Zo werkt het:

  1. Selecteer het knopelement met de querySelector() methode.
  2. Voeg een gebeurtenislistener toe aan de knop.
  3. Gebruik in de gebeurtenishandler de window.open() methode om de link in een nieuw tabblad te openen.

Open een URL in een nieuw tabblad

Geef _blank door om een ​​nieuw tabblad te openen als een tweede parameter voor window.open() of sla de tweede parameter volledig over en geef alleen de URL door. Stel dat u de volgende <button> . heeft tag ergens op uw webpagina:

<button id="clickMe">Click Me!</button>

U wilt er zeker van zijn dat wanneer de gebruiker op de bovenstaande knop klikt, een URL wordt geopend in een nieuw tabblad. Hier is hoe je het kunt doen in vanille JavaScript:

const button = document.querySelector('#clickMe');

// add click event listener
button.addEventListener('click', () => {

    // open a new tab
    const tab = window.open('https://attacomsian.com', '_blank');

});

De bovenstaande JavaScript-code opent https://attacomsian.com in een nieuw tabblad (of venster), afhankelijk van de browserinstellingen.

Asynchrone HTTP-aanvraag

Een ander belangrijk ding dat u moet weten voordat u de window.open() . gebruikt methode. Het nieuwe tabblad of venster wordt alleen geopend als direct resultaat van een gebruikersactie. In het bovenstaande voorbeeld wordt de URL geopend op de daadwerkelijke klikgebeurtenis.

Als u echter een asynchroon HTTP-verzoek doet, wanneer de gebruiker klikt en vervolgens een URL opent in een nieuw tabblad bij succes, zal de browser de pop-up blokkeren omdat het geen directe gebruikersactie is.

Hier is een voorbeeld dat de Fetch API gebruikt om een ​​AJAX-aanroep te doen en vervolgens een nieuw tabblad opent bij een geslaagde reactie:

button.addEventListener('click', () => {

    // make an API call
    fetch('https://reqres.in/api/users')
        .then(res => res.json())
        .then(json => {
            
            // fail in Chrome - popup blocked
            const tab = window.open('https://attacomsian.com', '_blank');
        });        
});

Om de bovenstaande code te laten werken, moeten we een paar wijzigingen aanbrengen. Het eerste wat u moet doen is een leeg nieuw venster openen bij klikken. Zodra het verzoek is voltooid, werkt u de werkelijke venster-URL bij en stelt u de focus in. Als het verzoek mislukt, sluit u het venster met de window.close() methode.

Hier is het complete voorbeeld dat in alle browsers zou moeten werken:

button.addEventListener('click', () => {

    // open an empty window
    const tab = window.open('about:blank');

    // make an API call
    fetch('https://reqres.in/api/users')
        .then(res => res.json())
        .then(json => {

            // TODO: do something with JSON response

            // update the actual URL
            tab.location = 'https://attacomsian.com';
            tab.focus();
        })
        .catch(err => {
            // close the empty window
            tab.close();
        });
});

Open een URL in een nieuw venster

Om een ​​URL in een nieuw venster te openen, moet u ervoor zorgen dat de tweede parameter de name . is van het raam of leeg. U kunt ook de hoogte en breedte van het venster specificeren met de features attribuut zoals weergegeven in het volgende voorbeeld:

button.addEventListener('click', () => {

    // open a new window
    const win = window.open('https://attacomsian.com', 'mysite',
    'width=600,height=500');
});