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

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Feb 24, 2020, updated Oct 12, 2022. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-open-url-in-new-tab

> Learn how to use the window.open() method to open a URL in a new tab or window when a button is clicked 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](https://attacomsian.com/blog/getting-dom-elements-javascript#query-selector).
2. [Add an event listener](https://attacomsian.com/blog/javascript-dom-add-an-event-handler) 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:

```markup
<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:

```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](https://attacomsian.com/blog/javascript-fetch-api) to make an AJAX call, and then open a new tab on a successful response:

```javascript
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:

```javascript
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:

```javascript
button.addEventListener('click', () => {
  // open a new window
  const win = window.open('https://attacomsian.com', 'mysite', 'width=600,height=500')
})
```