JavaScript >> Javascript tutorial >  >> Tags >> URL

Åbn en URL i en ny fane eller et nyt vindue på knapklik i JavaScript

I JavaScript kan du bruge window.open() metode til at åbne en URL i en ny fane ved knapklik. Den åbner en ny fane eller et nyt browservindue afhængigt af browserindstillingerne og de parametre, der er overført.

Sådan fungerer det:

  1. Vælg knapelementet ved hjælp af querySelector() metode.
  2. Tilføj en begivenhedslytter til knappen.
  3. Brug window.open() i hændelseshandleren metode til at åbne linket i en ny fane.

Åbn en URL på en ny fane

For at åbne en ny fane skal du indtaste _blank som en anden parameter til window.open() eller spring den anden parameter helt over og send kun URL'en. Antag, at du har følgende <button> tag et sted på din webside:

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

Du vil sikre dig, at når brugeren klikker på ovenstående knap, åbnes en URL i en ny fane. Sådan kan du gøre det i vanilla 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');

});

Ovenstående JavaScript-kode åbner https://attacomsian.com i en ny fane (eller et nyt vindue) afhængigt af browserindstillingerne.

Asynkron HTTP-anmodning

En anden vigtig ting, du bør vide, før du bruger window.open() metode. Den nye fane eller det nye vindue åbnes kun som et direkte resultat af en brugerhandling. I ovenstående eksempel bliver URL'en åbnet på den faktiske klikhændelse.

Men hvis du laver en asynkron HTTP-anmodning når brugeren klikker og derefter åbner en URL i en ny fane ved succes, vil browseren blokere pop op-vinduet fordi det ikke er en direkte brugerhandling.

Her er et eksempel, der bruger Fetch API til at foretage et AJAX-kald og derefter åbne en ny fane ved et vellykket svar:

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');
        });        
});

For at få ovenstående kode til at fungere, skal vi lave et par ændringer. Den første ting du skal gøre er at åbne et tomt nyt vindue på klik. Når anmodningen er fuldført, skal du opdatere den faktiske vindues-URL og indstille fokus. Hvis anmodningen mislykkes, skal du blot lukke vinduet med window.close() metode.

Her er det komplette eksempel, der burde virke i alle browsere:

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();
        });
});

Åbn en URL i et nyt vindue

For at åbne en URL i et nyt vindue skal du sørge for, at den anden parameter er name af vinduet eller tomt. Du kan også angive højden og bredden af ​​vinduet ved hjælp af features attribut som vist i følgende eksempel:

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

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