How to Open a Link in a New Window (Not Just a Tab)

80 / 100 SEO Score

Hey developers 👋

If you’ve ever worked with HTML links, you’ve probably used the target="_blank" attribute to open a link in a new page. But here’s the thing—modern browsers don’t behave the way they used to.

Instead of opening a new browser window, most browsers today will open a new tab. This is intentional, as tabs provide a better user experience and keep things more organized.

However, there are situations where you might actually want a separate window, such as when building tools, dashboards, previews, or lightweight popups. In those cases, relying purely on HTML is not enough.

Let’s walk through the proper way to handle this.

<a href="https://example.com" target="_blank">Open Link</a>

While this still works, it does not guarantee a new window. Most browsers will interpret this as a request to open a new tab instead.

This behavior is controlled by the browser, not your code. That means even if you expect a window, the final result depends on user settings and browser implementation.

So if you truly need more control, you’ll need a different approach.

open a link

✅ Using JavaScript for More Control

To open a link in a new browser window, JavaScript provides a solution through window.open().

<a href="#" onclick="window.open('https://techiedan.com','_blank','width=800,height=600,scrollbars=yes,resizable=yes'); return false;">
    Open in new window
</a>

This method allows you to define not just the URL, but also how the new window behaves.


🔍 Understanding How window.open() Works

The window.open() function has three main parts:

1. The URL

This is the page you want to open. It can be any valid link.

'https://techiedan.com'

2. The Target

This is usually _blank, which tells the browser to open a new browsing context.

'_blank'

3. Window Features

This is where you define the behavior and appearance of the window.

'width=800,height=600,scrollbars=yes,resizable=yes'

Common options include:

  • Width and height to control size
  • Position using top and left
  • Scrollbars for usability
  • Resizable option to allow user adjustments

These settings give you much more flexibility compared to regular HTML links.

To know more about window.open(), you may refer to this official documentation at Window.open() method – MDN Web Docs


⚠️ Important Limitations You Should Know

Before relying heavily on window.open(), it’s important to understand browser restrictions.

Modern browsers are designed to protect users from annoying or malicious popups. Because of this:

  • Some window settings may be ignored
  • A new tab may still be used instead of a window
  • Popups may be blocked entirely

To avoid being blocked, make sure the function is triggered directly by a user action, such as clicking a button just to open a link.

If the browser detects automatic popups, it will likely prevent them from opening.w.open() is triggered by a user action, such as a click. This might be the best way to open a link back then, but times have really changed.


✅ When Should You Use Each Approach?

You don’t always need a new window. In fact, most of the time, a new tab is more user-friendly.

Use target="_blank" when:

  • You are linking to external websites
  • You don’t need any control over layout
  • You want consistent behavior across browsers

Use window.open() when:

  • You need a controlled popup window
  • You want to define size and behavior
  • You are building tools or focused UI elements

💡 Practical Tip

Even with full control in JavaScript, you still don’t fully control how the browser behaves.

User preferences, browser policies, and extensions can override your settings. So always design your solution to be flexible and fail gracefully.

In other words, don’t rely on pixel-perfect behavior for new windows—treat them as an enhancement rather than a guarantee.


🎯 Summary

  • target="_blank" opens a new tab in most modern browsers
  • window.open() allows you to control window behavior
  • Browser rules may override your intended outcome
  • Always ensure the action is user-triggered

If this guide helped you solve a problem or saved you some debugging time, feel free to explore more practical dev tips on TechieDan.com 🚀

And if you’d like to support what I’m doing, you may donate to my coffee cup ☕ — it helps keep the content coming and the caffeine flowing 😄

Edit 8th May 2026: The article is now not relevant and needed a revamp as the year is now 2026 and browser behavior has changed over the past few decades. There are lots of other javascript tricks that have evolved over the years

Leave a Reply