Open URL in a New Tab with Javascript & HTML

No Comment

One common requirement in web development is opening new URLs in either a new tab or window. In this article, we’ll explore different techniques to achieve this using JavaScript.

Various Techniques to Open URL Links on New Tab or Window

Using window.open() method:

The window.open() method is an easy way to open a new URL in the browser window or tab. It takes the URL as its first parameter and, optionally, a target and additional window features.

// Open URL in a new tab without focus
window.open('https://www.codeindotnet.com', '_blank');

In this example, the second parameter _blank specifies that the URL should open in a new tab. You can use _self to open the URL in the same tab.

Creating anchor element:

Creating a hidden anchor <a> element and triggering a click on it is another approach to open a new URL. This technique is useful when you want to simulate a user clicking a link.

// Open URL in a new tab using hyper link
var newTab = window.open('', '_blank');
var a = document.createElement('a');
a.href = 'https://www.codeindotnet.com';
a.target = '_blank';
newTab.location = a.href;

You can use the button onClick event to execute this JS code.

Using as link

To open a URL in a new tab using an anchor <a> element, you can use the target attribute with the value _blank. Here’s an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Open URL in New Tab</title>
</head>
<body>

<a href="https://www.codeindotnet.com" target="_blank">Visit My Site</a>

</body>
</html>

In this example, when the user clicks on the link, it will open the specified URL in a new browser tab due to the target=”_blank” attribute but stays on the current page.

Using window.open for new Tab with focus()

This method is useful when you want to change the current tab’s location to a new URL. This code opens the URL in a new tab and then gives focus to that tab.

// Open URL in a new tab
window.open('https://www.codeindotnet.com', '_blank').focus();

also read: Difference between window.location.href, window.location.replace, and window.location.assign in JavaScript

Using window.location for a new window:

To open a new URL in a new browser window, you can use a similar approach with the window.location property.

// Open new URL in a new window
window.location.href = 'https://www.codeindotnet.com';

This method replaces the current page in the browser history with the new URL, effectively opening it in a new window.

Using window.open() with custom features:

You can customize the appearance of the new window by providing additional features like width, height, and position.

// Open URL in a new window with custom features
window.open('https://www.example.com', '_blank', 'width=600, height=400, left=100, top=100');

Adjust the values according to your requirements.

Note:

Keep in mind that some browsers may block pop-ups, and users can configure their browser settings to control how new tabs and windows are opened. It’s generally a good practice to open new tabs or windows in response to user actions, like a button click, to avoid being flagged as pop-ups by browser security features.

As already mentioned, if you’re working with links in HTML, you can achieve a similar result by setting the target attribute to ‘_blank’.