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 a 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:

1. Select the button element using the querySelector() method.
2. Add an event listener to the button.
3. 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 entirely 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 ensure 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 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, only 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')
})

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.