How to Open URL Using JavaScript in Same or New Tab/Window

Normally we navigate from one page to another by clicking an HTML link but you can open an URL using JavaScript. It will open the link in the new browser window or tab based on your browser settings.

The window.open() method is used to open an URL using JavaScript. This method takes some parameters to customize how and where the link should open in the browser. It can open the link in a new tab or in the current tab depending on the parameter value.

It might sound complex to you, but the interesting thing is that you can do everything just by writing a single line of JavaScript code.

In this article, I will show you how to use the window.open() method to open an URL in the browser automatically using JavaScript. You will also see all the customization options that you can use with this method.

Open URL Using JavaScript window.open() Method

You can call the open() method on the browser window object. You don't need to pass any parameter to this method because it doesn't have any required parameters.

If you call the window.open() method as it is, the browser will open a new empty tab. But you can pass an URL string in the first parameter.

By default, when you call this method with an URL, it will open that URL in a new tab. You can change this behavior by using other parameters.

This method can accept up to 3 optional parameters. These are url, target, and features. This is the syntax you have to use to call the window.open() method.

          // Without any parameter
window.open();

// With an URL
window.open(url);

// With an URL and target
window.open(url, target);

// With an URL, target and features
window.open(url, target, features);

        

These are the 4 ways you can call this method in your JavaScript code. You need to use different values in those parameters to modify how it works.

Let's see how and what types of values you can provide to this method while calling it.

Also Read: How to Change URL Dynamically Without Reloading Page in JavaScript

Parameters of The window.open() Method

This is the list of all optional parameters and their values:

url

It is a string that specifies the URL or a path that you want to open. You can give a full URL or a relative path. If you pass an empty string ("") in this place, browsers will ignore it and open a blank page.

          // Full URL
window.open("https://www.example.com");

// Relative URL
window.open("/posts");
        

target

It determines where to display the URL. You can use all the target attributes of the HTML <a> tag. You need to pass its value as a string.

This is the parameter that controls whether the link will open in the current tab or in the new tab. These are the most important values you need to know to use this parameter:

• _self – It opens the URL in the current tab by replacing the opened page.
• _blank – It opens the URL in a new tab. This is the default value.
• _parent – It loads the URL into the parent frame. If there is no parent, behave as _self.
• _top – It opens the URL by replacing any framesets. If no frameset, behave as _top.

You can pass any custom text other than these values if you want. It will work as the name of the window. You are able to extract your custom text from the object that window.open() method returns.

We will look into the returned value and how you can get the text from it in the later section.

features

It is a comma-separated list of items without whitespaces that can customize the new window. But this parameter is rarely used. Because browsers apply these parameter values differently.

Some browsers also don't use all the values that this parameter supports. This is the list of items that you can choose for this parameter:

Also Read: How to Check For Hash (#) Value in a URL Using JavaScript

Open URL in The New Tab With JavaScript

You have learned about the window.open() method and its parameters. Now let's see how you can use this method to open a URL in the new tab.

          window.open("https://www.webmound.com/blog", "_blank", "location=yes,height=570,width=520,status=yes");
        

In this example, I am using all 3 parameters in the window.open() method. I am setting an URL that I want to open. In the second parameter, I have used "_blank" because I want to open this link in the new window.

This value is responsible to open a new tab in the browser. I am also providing some features for the new window in the third parameter.

Note: If you don't pass any target or an empty string (""), the browser will use "_blank" by default and open the link in a new window.

Open URL in The Same Tab Using JavaScript

It is very easy to open an URL in the same tab using window.open() method in Javascript. You just have to set the target parameter to "_self".

          window.open("https://www.webmound.com/blog", "_self");
        

When the browser executes this method, it will open this URL in the current tab by replacing the current page.

Also Read: Check Internet Connection Offline/Online Using JavaScript in Browser

Return Value From the window.open() Method

When the browser executes the window.open() method, it will return the window object. But if the browser fails for any reason, it will return null.

This method also returns a null value if the features parameter has noopener=yes in it.

          const handle = window.open("https://www.webmound.com/blog", "_blank", "noopener=yes");
console.log(handle);
// null

const handle2 = window.open("https://www.webmound.com/blog", "_blank");
console.log(handle2);
// window object

        

In this example, I am calling the window.open() method twice. I used noopener=yes in the first call. Therefore, it is returning a null value.

But in the second call, I am not using that feature parameter. So, I am getting a window object as the return value.

As you know, you can pass a custom string in the target parameter. You can also get that custom string back from the window object, returned from the window.open() method.

          const handle = window.open("https://www.webmound.com/blog", "Web_Mound");

console.log(handle.name);
// Web_Mound
        

I am calling the window.open() method with the "Web_Mound" value in its second parameter. When this method returns a new window object, I can access the name property on that object to get the value back.

Conclusion

It is very easy to open an URL using JavaScript. You just have to write a single line of code to do it. You will call the window.open() method with the URL that you want to open.

This method also has some customization options. By passing different parameter values, it is possible to modify the default behavior.

You can open your link in the same tab or in a new tab. You can also control how the new window will look by using the features parameter.

I hope it was helpful. You have learned how to open an URL in JavaScript using window.open() method.