Kliknutím na tlačítko v JavaScriptu otevřete adresu URL na nové kartě nebo okně

V JavaScriptu můžete použít window.open() způsob otevření adresy URL na nové kartě kliknutím na tlačítko. Otevře novou kartu nebo nové okno prohlížeče v závislosti na nastavení prohlížeče a zadaných parametrech.

Funguje to takto:

  1. Vyberte prvek tlačítka pomocí querySelector() metoda.
  2. Přidejte k tlačítku posluchač události.
  3. V obslužné rutině události použijte window.open() způsob otevření odkazu na nové kartě.

Otevřít adresu URL na nové kartě

Chcete-li otevřít novou kartu, zadejte _blank jako druhý parametr na window.open() nebo úplně přeskočte druhý parametr a předejte pouze URL. Předpokládejme, že máte následující <button> tag někde na vaší webové stránce:

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

Chcete se ujistit, že když uživatel klikne na výše uvedené tlačítko, otevře se adresa URL na nové kartě. Zde je návod, jak to udělat ve vanilkovém JavaScriptu:

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

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

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

});

Výše uvedený kód JavaScript otevře https://attacomsian.com na nové kartě (nebo okně) v závislosti na nastavení prohlížeče.

Asynchronní požadavek HTTP

Další důležitá věc, kterou byste měli vědět před použitím window.open() metoda. Nová karta nebo okno se otevře pouze jako přímý výsledek akce uživatele. Ve výše uvedeném příkladu se adresa URL otevírá při skutečné události kliknutí.

Pokud však provedete asynchronní požadavek HTTP když uživatel klikne a poté v případě úspěchu otevře adresu URL na nové kartě, prohlížeč zablokuje vyskakovací okno protože se nejedná o přímou akci uživatele.

Zde je příklad, který používá rozhraní Fetch API k provedení volání AJAX a poté k otevření nové karty při úspěšné odpovědi:

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

Aby výše uvedený kód fungoval, musíme provést několik změn. První věc, kterou byste měli udělat, je otevřít prázdné nové okno při kliknutí. Po dokončení požadavku aktualizujte skutečnou adresu URL okna a nastavte fokus. Pokud požadavek selže, stačí okno zavřít pomocí window.close() metoda.

Zde je úplný příklad, který by měl fungovat ve všech prohlížečích:

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

Otevřít adresu URL v novém okně

Chcete-li otevřít adresu URL v novém okně, ujistěte se, že druhý parametr je name okna nebo prázdné. Můžete také určit výšku a šířku okna pomocí features atribut, jak je znázorněno v následujícím příkladu:

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

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