How to open a new tab in JavaScript? [SOLVED]

As a web developer, it is common to encounter situations where you want to open a new tab or window using JavaScript. This could be for various reasons such as opening a link to another website or displaying some content in a new tab. In this article, we will explore how to use window.open() method to open a new tab in JavaScript.

Using `window.open()` method to open a new tab

The window.open() method is a built-in JavaScript method that allows the opening of a new browser window or tab. This method takes two parameters, the URL of the page to be opened and the target attribute that specifies where to open the link. If the target attribute is not specified, the link will open in the current tab/window.

The syntax for using the window.open() method is as follows:

window.open(URL, name, specs, replace);

URL: This parameter specifies the URL of the page to be opened. It is a mandatory parameter.
name: This parameter specifies the name of the window. It is an optional parameter.
specs: This parameter specifies the features of the opened window like width, height, and position. It is also an optional parameter.
replace: This parameter specifies whether to replace the current page in the history or not. It is also an optional parameter.

Let’s see an example of how to use the window.open() method to open a new tab. In this example, we will open the GoLinuxCloud homepage in a new tab.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <h1>Open a New Tab</h1>
        <p>Here we show you how to open a new tab using JavaScript</p>
        <a class="link" href="<https://www.golinuxcloud.com>" target="newWindow">GoLinuxCloud</a>
    </body>
</html>

The JavaScript

let windowObjectReference = null;
function openRequestedTab(url, windowName) {
    if (windowObjectReference === null || windowObjectReference.closed) {
        windowObjectReference = window.open(url, windowName);
    } else {
        windowObjectReference.focus();
    }
}

const link = document.querySelector("a[target='newWindow']");
link.addEventListener(
    "click",
    (event) => {
        openRequestedTab(link.href);
        event.preventDefault();
    },
    false
);

Output

In this example, we define a function openRequestedTab and an event listener that calls this function when a link is clicked, preventing the default behavior of opening the link in a new window.

The openRequestedTab function takes two arguments, url and windowName. It first checks if the global variable windowObjectReference is null or if the window it references has been closed. If either of these conditions is true, it opens a new window using the window.open method with the given url and windowName arguments, and assigns the reference to the windowObjectReference variable.

If the windowObjectReference variable is not null and the window it references is still open, the function focuses on the existing window using the window.focus() method. The event listener is added to a link element in the HTML document that has a target attribute set to "newWindow". When the link is clicked, the event listener calls the openRequestedTab function with the link’s href attribute as the url argument, which opens the linked URL in a new tab or window depending on the user’s browser settings. The event.preventDefault() method is called to prevent the default behavior of the link element, which is to navigate to the GoLinuxCloud URL in the current tab.

Summary

In this article, we have discussed how to open a new tab in JavaScript using the window.open() method. We have seen the syntax of this method and explored an example that demonstrate how to use it. By using this method, web developers can easily open new tabs or windows in their web applications.

References

Window.open() - Web APIs | MDN (mozilla.org)

Using window.open() method to open a new tab

Summary

References

Related Articles

Using `window.open()` method to open a new tab