How to open a URL in a new tab using JavaScript

The simplest and easiest way to open a URL in a new tab is by using the HTML anchor tag. You can use <a> to open the new tab by setting the target="_blank" attribute.

However, sometimes you want to open a URL in a new tab using JavaScript. There is a method called window.open() in vanilla JavaScript that can be used for this purpose. It opens a new tab or a new browser window depending on the browser settings and the parameters passed.

window.open() Syntax

The window.open() method has the following syntax:

const window = window.open(url, name, features)

The url parameter specifies the URL of the web page to open. If no URL is specified, a new window or a tab with about:blank is opened.

The name specifies the target attribute or the name of the window. It supports the following:

• _blank — The URL is opened in a new window or tab. This is the default value.
• _parent — The URL is loaded into the parent window.
• _self — The URL replaces the current web page.
• _top — The URL replaces any framesets that may be loaded.
• name — The name of the window.

The features parameter is used to specify a comma-separated list of window features in the form of "name=value". These features include options such as the window's default size and position, whether or not to include scroll bars, and more.

The window.open() method returns a reference to the newly created window, or null if it failed.

Opening a new Tab

To open a new tab, you have to pass _blank as a second parameter to window.open() or skip the second parameter completely and only pass the URL. Let us say that you have the following <button> tag somewhere in 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

There is another interesting 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 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();
        });
});

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

The above example code will open a new browser window when the button is clicked.

✌️ Like this article? Follow @attacomsian on Twitter. You can also follow me on LinkedIn and DEV. Subscribe to RSS Feed.

👋 If you enjoy reading my articles and want to support me to continue creating free tutorials, ☕ Buy me a coffee (cost $5) .

Need help to launch a new product? I am available for contract work. Hire me to accomplish your business goals with engineering and design.