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:
- Selecteer het knopelement met de
querySelector()
methode. - Voeg een gebeurtenislistener toe aan de knop.
- 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');
});