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 me on Twitter and LinkedIn. You can also subscribe to RSS Feed.