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="noopener noreferrer">Open page</a>

This is often more reliable and more accessible than using JavaScript alone.

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

This is often the simplest solution.

• target="_blank" requests a new tab or window
• rel="noopener noreferrer" improves security and performance when opening another page

Example 3: A case that may be blocked

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

This may be treated as a popup because it is not directly tied to a user action.

Example 4: Features can make it look like a popup window

window.open('https://example.com', '_blank', 'width=600,height=400');

When you pass window features like size, browsers often treat it more like a popup window than a normal tab.

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:

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

Here the call happens after a delay, so the browser may no longer consider it a direct user action. That often causes popup blocking or different behavior.

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:

window.open(url, '_blank', 'width=800,height=600');

Features often push the browser toward popup-style behavior.

4. Use guard clauses before opening

function openUserProfile(url) {
  if (!url) {
    console.error('Missing URL');
    return;
  }

  window.open(url, '_blank');
}

This prevents calling window.open() with invalid data.

5. Security with external pages

When using HTML links, developers often add:

rel="noopener noreferrer"

This prevents the opened page from getting a reference back to the original page through window.opener in many cases.

6. Fallback thinking

Because browsers control the final result, good code does not depend on “must be a tab.” It only depends on “open in a new browsing context.”

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

3. Adding popup-style features when you want a tab

Problematic code:

window.open('https://example.com', '_blank', 'width=500,height=400');

Those features often encourage popup window behavior.

Better:

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

4. Using JavaScript when a link is enough

Overcomplicated:

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

Simpler:

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

5. Forgetting security attributes on external links

Less safe:

<a href="https://external-site.com" target="_blank">External site</a>

Better:

<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">External site</a>

6. Assuming behavior is identical across browsers

Different browsers and user preferences can produce different results. Always test the actual user flow, not just the exact appearance as a tab or window.

target="_blank" vs window.open()

New tab vs new window

// 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.addEventListener('click', () => {
  window.open('https://example.com', '_blank');
});

Common link pattern

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

Edge case

This may be blocked:

setTimeout(() => {
  window.open('https://example.com', '_blank');
}, 1000);

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?

Yes, especially for external links. It is a common security best practice.

Is window.open(url) different from window.open(url, '_blank')?

Yes. Using _blank makes your intent clearer: open in a new browsing context. Without it, behavior may depend more on existing browsing contexts and browser rules.

• 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