Abra una URL en una nueva pestaña o ventana al hacer clic en el botón en JavaScript

En JavaScript, puede usar el window.open() método para abrir una URL en una nueva pestaña al hacer clic en el botón. Abre una nueva pestaña o una nueva ventana del navegador según la configuración del navegador y los parámetros pasados.

Así es como funciona:

  1. Seleccione el elemento del botón usando el querySelector() método.
  2. Agregue un detector de eventos al botón.
  3. En el controlador de eventos, use el window.open() método para abrir el enlace en una nueva pestaña.

Abrir una URL en una pestaña nueva

Para abrir una nueva pestaña, pasa _blank como segundo parámetro para window.open() u omita el segundo parámetro por completo y solo pase la URL. Suponga que tiene el siguiente <button> etiqueta en algún lugar de tu página web:

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

Desea asegurarse de que cuando el usuario haga clic en el botón anterior, se abra una URL en una nueva pestaña. Así es como puede hacerlo en JavaScript estándar:

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

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

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

});

El código JavaScript anterior abrirá https://attacomsian.com en una nueva pestaña (o ventana) dependiendo de la configuración del navegador.

Solicitud HTTP asíncrona

Otra cosa importante que debes saber antes de usar el window.open() método. La nueva pestaña o ventana solo se abre como resultado directo de una acción del usuario. En el ejemplo anterior, la URL se abre en el evento de clic real.

Sin embargo, si realiza una solicitud HTTP asíncrona cuando el usuario hace clic y luego abre una URL en una nueva pestaña en caso de éxito, el navegador bloqueará la ventana emergente porque no es una acción directa del usuario.

Aquí hay un ejemplo que usa la API Fetch para hacer una llamada AJAX y luego abre una nueva pestaña en una respuesta exitosa:

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

Para que el código anterior funcione, necesitamos hacer algunos cambios. Lo primero que debe hacer es abrir una nueva ventana vacía al hacer clic. Una vez que se complete la solicitud, actualice la URL de la ventana real y establezca el enfoque. Si la solicitud falla, simplemente cierre la ventana usando el window.close() método.

Aquí está el ejemplo completo que debería funcionar en todos los navegadores:

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

Abrir una URL en una nueva ventana

Para abrir una URL en una nueva ventana, asegúrese de que el segundo parámetro sea el name de la ventana o vacío. También puede especificar la altura y el ancho de la ventana usando el features atributo como se muestra en el siguiente ejemplo:

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

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