How to open a URL in a new tab or window on button click in JavaScript

published: 16 Apr 2022

2 min read

Open a URL in a new tab or window on button click in JavaScript

In JavaScript, you can use the window.open() method to open a URL in a new tab on button click. It opens a new tab or a new browser window depending on the browser settings and the parameters passed.

Here is how it works:

Select the button element using the querySelector() method.
Add an event listener to the button.
In the event handler, use the window.open() method to open the link in a new tab.

Open a URL in a new tab

To open a new tab, pass _blank as a second parameter to window.open() or skip the second parameter completely and only pass the URL. Suppose you have the following <button> tag somewhere on your web page:

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

You want to make sure that when the user clicks on the above button, a URL is opened in a new tab. Here is how you can do it in 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');

});

The above JavaScript code will open https://attacomsian.com in a new tab (or window) depending on the browser settings.

Asynchronous HTTP Request

Another important thing you should know before using the window.open() method. The new tab or window is only opened as a direct result of a user action. In the above example, the URL is being opened on the actual click event.

However, if you make an asynchronous HTTP request when the user clicks and then opens a URL in a new tab on success, the browser will block the popup because it is not a direct user action.

Here is an example that uses the Fetch API to make an AJAX call, and then open a new tab on a successful response:

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

To make the above code work, we need to make a few changes. The first thing you should do is open an empty new window on click. Once the request is completed, update the actual window URL and set the focus. If the request fails, just close the window using the window.close() method.

Here is the complete example that should work in all browsers:

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 a URL in a new window

To open a URL in a new window, make sure that the second parameter is the name of the window or empty. You can also specify the height and width of the window using the features attribute as shown in the following example:

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

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

Are we missing something? Help us improve this article. Reach out to us.