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)