Make a link open a new window (not tab)

Opening Links in New Windows (Not Tabs)

Learn how to configure HTML links to open in a new browser window instead of a new tab, understanding the nuances of target attributes and user experience.

By default, when you click on an HTML link, it typically opens in the same browser tab or window. However, there are scenarios where you might want a link to open an entirely new window, distinct from a new tab. This article explores how to achieve this behavior using the target attribute, focusing on the differences between opening a new tab and a new window, and the implications for user experience.

Understanding the target Attribute

The target attribute in an <a> tag specifies where to open the linked document. While commonly used with _blank to open a new tab, its behavior can subtly change depending on browser settings and user preferences. To explicitly open a new window, we often rely on _blank in conjunction with other attributes or browser interpretations. Historically, _new was used, but _blank became the de-facto standard for both new tabs and windows, with the browser deciding the exact behavior.

<a href="https://www.example.com" target="_blank">Visit Example.com</a>

This is the most common way to open a link in a new browsing context, which usually defaults to a new tab.

Enhancing Security with rel Attribute

When using target="_blank", the newly opened page gets partial access to the originating page via the window.opener object. This can be exploited for 'tabnabbing' where the new page changes the window.opener.location to a phishing site. To prevent this, add rel="noopener noreferrer" to your anchor tags. noopener ensures the new page cannot access window.opener, and noreferrer prevents the new page from knowing the originating page's URL.

<a href="https://www.secure-example.com" target="_blank" rel="noopener noreferrer">Visit Secure Example.com</a>

Always use rel="noopener noreferrer" with target="_blank" for security.

Conceptual difference between opening a new tab vs. a new window.

Controlling Window Properties with JavaScript (Advanced)

For more fine-grained control over opening a new window, including its size, position, and other properties, JavaScript's window.open() method is the tool. This method allows you to specify various features of the new window, making it behave more like a traditional popup window rather than a new tab. However, be aware that modern browsers often block pop-ups, and user experience can be negatively impacted if not used judiciously.

function openNewWindow() {
  const url = 'https://www.advanced-example.com';
  const name = 'myNewWindow';
  const features = 'width=800,height=600,resizable=yes,scrollbars=yes';
  window.open(url, name, features);
}

// In your HTML:
// <button onclick="openNewWindow()">Open Advanced Example</button>

Using window.open() to create a new window with specific dimensions and features.

1. Step 1

Identify the link you want to open in a new window.

2. Step 2

Add the target="_blank" attribute to your <a> tag.

3. Step 3

Crucially, add rel="noopener noreferrer" to the same <a> tag for security.

4. Step 4

Test the link across different browsers to ensure the desired behavior, noting that browser settings can influence tab vs. window behavior.