How to Open href Link in a New Tab in JavaScript

An introduction to JavaScript's href tag

In JavaScript, the term "hypertext reference" is abbreviated as href. This attribute can be found within the anchor (<a>) tag. The href attribute is utilized for specifying website URLs, such as www.google.com, www.gmail.com, www.facebook.com, and others.

Practical illustration: Throughout our everyday experiences, we navigate numerous websites. Have you ever pondered how we arrive at the URL of a particular site? The href tag enables us to reach any website URL. Within the quotation marks (href="website") of the href attribute, all that is required is the website address.

How does the JavaScript href attribute function?

The functionality of the JavaScript href attribute varies based on the href tag employed. With a minor exception, the primary objective of all existing href tags remains consistent, which is to navigate to web URLs.

The href attribute can be utilized within four specific tags. These tags are:

<a>: This tag is utilized to indicate the URL of the page that should be embedded within the href attribute of the link.

Syntax:

Example


<a href="URL link"></a>

<area>: This tag is utilized to indicate the URL of the page that should be included within the href attribute of the link.

Syntax:

Example


<area href="URL link"></area>

<base>: This tag is utilized to define the base URL for all relative page URLs when a link is required to be included within the href attribute.

Syntax:

Example


<base href="Base URL link"></base>

<area>: In the href attribute, this tag serves to indicate the path to external files like styles.css, javascript.js, and so forth.

Syntax:

Example


<link href="external link"></link>

There are two approaches to launch the href link in a new tab:

✅ Utilizing the window.open method
✅ Employing the anchor element (HTML DOM)

Using window.open method

Similar to the different pop-ups we experience while viewing videos or engaging in games, the openWindow function in JavaScript is designed to create a new window that displays the specified data. This JavaScript function, known as openWindow, allows users to initiate a new window. The URL provided will be redirected to a new pop-up window that is generated. Additionally, users have the option to specify a parameter to determine the size of this window. Most modern web browsers are configured to open tabs instead of separate windows.

How to use it?

✅ We must use _blank in the window.open method's second parameter in order to open a new tab.
✅ When window.open is called, it returns null if the operation is unsuccessful or a reference to the newly created window or tab.
✅ Avoid adding a third parameter to it as it will cause a new window to open instead of a tab.

Syntax

Example


var window = window.open(url, windowName, [windowParameters]);

The elements associated with the syntax outlined above are detailed as follows:

url: The designation of the URL that is required to launch in a new window.

windowName: This refers to the designation of the window. Each window possesses a unique identifier, represented as window.name. If a window with the indicated name is already open, the URL will load in that existing window; if not, a new window will be created to display the content.

windowParameters: A collection of window attributes is provided in the format "name = value," accompanied by their corresponding values. This will yield a list of features, which may include elements like the toolbar, the position of the window, and the default dimensions. It is important to note that the string must not have any spaces.

Example


<html>

<head>
    <title>Open URL in New Tab </title>
</head>

<body>

    <p> Click the below button to open
        <b> example.org </b>
        in new tab
    </p>
    <button onclick="NewTab()">
        Open Website
    </button>

    <script>
        function NewTab() {
            window.open(
                "https://logic-practice.com/", "_blank");
        }
    </script>

</body>

</html>

Output

Utilizing the HTML DOM's Anchor Element

In the context of the HTML Document Object Model (DOM), the anchor element, represented as "a," is generated programmatically. The target attribute of this element is assigned the value "_blank," which indicates that the link should open in a new tab. Furthermore, the href attribute is configured to point to the specified URL. Consequently, when a click event occurs on this anchor element, the designated URL will be launched in a new browser tab.

In this illustration, we have implemented a button that, when activated, launches "example.org" in a new browser tab. Upon clicking the button, it programmatically generates an "a" element featuring the specified URL and a target set to "_blank." This action triggers a click event that results in the link being opened in a separate tab.

Example


<html>

<head>
    <title>Open URL in New Tab </title>
</head>

<body>

    <p> Click the below button to open
        <b> example.org </b>
        in new tab
    </p>


    <button onclick="NewTab()">
        Open Website
    </button>

    <script>
        function NewTab() {
            let newTab = document.createElement('a');
            newTab.href = "https://logic-practice.com/";
            newTab.target = "_blank";
            newTab.click();
        }
    </script>

</body>

</html>

Output

Summary

When a URL is accessed in a new tab, the existing page remains intact, as the web address is launched in an alternate browser tab. This is achieved by utilizing target="_blank" in HTML hyperlinks or employing window.open in JavaScript. This method ensures a seamless browsing experience across supported web browsers.

An introduction to JavaScript's href tag

How does the JavaScript href attribute function?

Using window.open method

How to use it?

Utilizing the HTML DOM's Anchor Element

Summary

Input Required