How to Open a URL in a New Tab in JavaScript

By the end of this page, you will understand how window.open() works in JavaScript, why _blank is commonly used, and why browsers ultimately decide whether a link opens in a new tab or a new window. You will also learn the safest and most practical ways to trigger new-tab behavior in real applications.

JavaScript can request that a browser open a URL in a new browsing context, but it cannot fully control whether that context appears as a tab or a separate window.

The core tool is:

window.open(url, '_blank');

Here is what the arguments mean:

• url: the page to open
• _blank: open it in a new browsing context

The important detail is that _blank does not literally mean “new tab.” It means new tab or new window, depending on:

• the browser
• the user's browser settings
• popup blocking rules
• whether the call came directly from a user action like a click
• whether window features were provided

This matters because many beginners expect JavaScript to force a tab, but browsers intentionally keep that control for usability and security reasons.

In real programming, this concept matters when:

• opening external documentation
• launching third-party login pages
• opening reports or downloads
• letting users keep their current page while viewing another one

A related best practice is to prefer a normal link when possible:

<a href="https://example.com" target="_blank" rel=> page</a>

Think of window.open() like asking a receptionist to send a visitor to a new room.

• You can say: “Please open this in a new place.”
• But you cannot demand: “It must be room 3 and not room 4.”

The browser is the receptionist. JavaScript makes the request, but the browser decides whether the new place is shown as:

• a new tab
• a separate window

So the key mental model is:

• JavaScript requests
• the browser decides
• the user settings may override both

The most common syntax is:

window.open(url, '_blank');

Example 1: Open a page from a button click

<button id="openDocs">Open documentation</button>

<script>
  document.getElementById('openDocs').addEventListener('click', function () {
    window.open('https://developer.mozilla.org/', '_blank');
  });
</script>

This asks the browser to open the URL in a new browsing context. In many browsers, this will appear as a new tab if it was triggered directly by the user's click.

Example 2: Prefer an HTML link when possible

<a href="https://developer.mozilla.org/" target="_blank" rel="noopener noreferrer">
  Open documentation

Consider this example:

<button id="openSite">Open site</button>

<script>
  const button = document.getElementById('openSite');

  button.addEventListener('click', function () {
    window.open('https://example.com', '_blank');
  });
</script>

Step by step:

1. The browser loads the page.
2. JavaScript finds the button with getElementById('openSite').
3. An event listener is attached to the button.
4. The user clicks the button.
5. The click handler runs immediately.
6. window.open('https://example.com', '_blank') is called.
7. The browser sees this happened during a real user action.
8. The browser allows a new browsing context to open.
9. Depending on browser behavior and user settings, that context appears as:
   • a new tab, or
   • a new window

Now compare that with this version:

Here are common places where opening a new tab or window is useful:

• Documentation links: keep your app open while users read help pages
• External partner sites: send users to payment providers, support portals, or vendor tools
• Reports and exports: open generated reports without leaving the dashboard
• Preview pages: open a preview of an article, PDF, or invoice
• Admin tools: inspect logs, dashboards, or third-party consoles in a separate context

Example in a dashboard:

function openInvoicePreview(invoiceId) {
  const url = `/invoices/${invoiceId}/preview`;
  window.open(url, '_blank');
}

Example in a search results page:

<a href="/articles/123" target="_blank" rel="noopener noreferrer">
  Open article in a new tab
</a>

In both cases, the app asks for a new browsing context so the current page stays open.

In real projects, developers usually follow a few patterns.

1. Prefer links for navigation

If the user is going somewhere, an anchor is often better than JavaScript:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit site</a>

Why this is common:

• more accessible
• works without extra JavaScript logic
• easier for screen readers and browser features
• supports middle-click and keyboard navigation naturally

2. Use window.open() inside direct event handlers

button.addEventListener('click', () => {
  window.open(reportUrl, '_blank');
});

This reduces the chance of popup blocking.

3. Avoid unnecessary window features

window.open(url, '_blank');

Instead of:

1. Expecting JavaScript to force a new tab

Broken expectation:

window.open('https://example.com', '_blank');

This does not guarantee a tab. It only requests a new browsing context.

How to avoid it:

• design your app so either a new tab or new window is acceptable
• do not build features that depend on one exact browser UI choice

2. Calling window.open() outside a user action

Problematic code:

window.addEventListener('load', function () {
  window.open('https://example.com', '_blank');
});

This is likely to be blocked as a popup.

Better:

button.addEventListener('click', function () {
  window.open('https://example.com', '_blank');
});

// Ask browser to open a URL in a new browsing context
window.open(url, '_blank');

<!-- Preferred for normal links -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Open</a>

Key rules

• _blank means new browsing context, not guaranteed new tab
• browsers decide tab vs window
• direct user actions are important
• delayed or automatic calls may be blocked as popups
• window features like width and height often create popup-style windows
• use rel="noopener noreferrer" on external _blank links

Good practice

• prefer anchor tags for normal navigation
• use window.open() for dynamic or script-based flows
• keep the call inside a click handler
• do not rely on exact browser UI behavior

Common safe pattern

button.(,  {
  .(, );
});

Can JavaScript force a URL to open in a new tab and not a new window?

No. JavaScript can request a new browsing context with _blank, but the browser and user settings decide whether it appears as a tab or a separate window.

Why does window.open(url, '_blank') sometimes open a popup window?

Because _blank does not mean tab only. Browser preferences, popup policies, and window features can make it open as a separate window.

What is the best way to open a link in a new tab?

For normal navigation, use an anchor tag:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Open</a>

Why is my window.open() call being blocked?

It is often blocked when it is not directly triggered by a user action, such as a real click or key press.

Does adding width and height affect how the page opens?

Yes. Passing window features like width=600,height=400 often makes the browser treat it like a popup window.

Should I use rel="noopener noreferrer" with _blank?

• window.open() — the JavaScript API used to request a new browsing context
• anchor tags — the semantic HTML way to navigate to another page
• target attribute — controls where a link opens, such as _blank
• popup blockers — browsers use these to prevent unwanted windows from opening
• event handling — direct user events are important for allowing window.open()
• browser security — browsers restrict scripted window behavior for safety and usability
• rel="noopener noreferrer" — improves security when opening external pages in a new context
• user agent behavior — browser-specific behavior explains why results differ across environments