One of the most simple and basic actions you find in websites or apps is being able to open a URL into a new tab or window. In most cases this is not only dependent of your code but also the settings of the browser that is used. Let’s see how to proceed in order to make this action possible!
1. Basic understanding
It happens often that we want to present our user with an external source without taking them away from our own page. In this case we add a functionality in our website that is pretty easy and basic. We can do this either by using the method window.open(), or by taking advantage of the target attribute of the anchor tag in HTML.
1.1 Using the Target Attribute
Let’s analyze them one by one, starting with the HTML method first. Take a look at the code snippet below:
opennewtab.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Open New Tab</title>
</head>
<body>
<a href="http://webcodegeeks.com" target="_blank">Open New Tab</a>
</body>
</html>
The code you see above would be the only thing we would need to make out goal happen. As you can certainly see, except for all the main HTML structure that would go with any document, we have added an anchor tag which, when clicked, would take us to http://webcodegeeks.com by opening a new tab.
As you see we have added the attribute target and have given it the value _blank. This means that the URL will be opened in a new tab or window, depending on the default settings of your browser. However, you can also use it to open the link into another frame. The only thing you would have to change is the value of the target attribute. It would take the name of the frame you wish to open the link into instead.
Moreover, if you are navigating in a frame, and want to open the external link into the entire tab, you can do that by assigning the attribute the value _top. By doing this you will have performed what is called “frame breaking”, which basically means going from a frame to the main tab. Note that we are assuming your default setting to be opening external links in new tabs, and not windows, but that is entirely in the users’ preference, as nothing would change in the code.
1.2 Using the window.open() method
window.open(), by definition, is a method that loads a resource into another (or the same, depending on the specified parameters) browsing context. It’s syntax would go like below:
syntax.js
var newWindow = window.open(URL, windowName, [windowFeatures]);
As you see, the method takes three parameters. The first one, URL, specifies the URL to be loaded in the newly opened tab. It can be a document, image file or any other resource supported by the browser. The next one would be windowName and contains the name of the new window, which can be used by the target attribute later on. It shouldn’t contain any whitespaces. The third one is an array of features of the window we’re creating such as size or position etc. Let’s see it in more detail by seeing how this method behaves in real life.
2. Opening a new tab using Window.open()
We already explained the basic syntax of using window.open() to open a new tab. Let’s see how we would use that exactly according to the syntax. See the code snippet below:
opennewtab.js
var newWindow;
function openWindow() {
newWindow = window.open("http://www.webcodegeeks.com/", "WebCodeGeeks", "location=yes,resizable=yes,scrollbars=yes,status=yes");
}
As you can see, the arguments we have assigned to the method are pretty self-descriptive. We have given it http://www.webcodegeeks.com/ as a URL, WebCodeGeeks as a name in case we need to reference it later, and also added some features to it as the third argument.
The method will open a new window, similarly to opening a new window manually, but it will also redirect you to a certain URL. However, if the URL is not specified, a new blank window will be opened. The URL will not be loaded immediately, firstly, the code block that was being executed will finish that, and then the URL will be fetched. This means that the creation of the window and the actual loading of the URL are done asynchronously.
If there already exists a window with the windowName we have specified, the URL will be loaded into that window and the window features we specified will be thus ignored. That can also be used as a way to open an already existing window, while setting the first parameter to a empty string. Meanwhile, you can open a new blank window by setting the second parameter to _blank.
The third parameter is an optional one that contains features of the newly opened window. However, after a window has been opened, it cannot be changed anymore by Javascript. If it is not specified, the secondary window will take the features of the main window. Also, if the parameter is specified, but no size values are given to it, the new window will follow the most recently rendered one. However, if the feature that is not specified is position, the width and length of the newly opened window will be 22px smaller than the main one, to help the user understand that a new window has been opened.
Now you are fully able to use either HTML or Javascript to open a new tab or window according to your own requirements.
3. Download the source code
This was an example of Opening a New Tab in Javascript.
