Javascript: onClick Open Link in New Tab (HTML Button)

At times we want to open a new tab by clicking a link or a button in our webpage. This is usually done when we want to open an external website without taking the user away from our own webpage. This being a very often used functionality by webmasters –ways to accomplish this have been developed using HTML as well as JavaScript.

If you have an HTML button, you can use the following JavaScript code to open a desired URL in a new tab when user clicks the button.

<input type="button" value="New Tab" onclick="window.open('http://www.example.com')">

Remember, this method will open either a new tab or a new window depending upon the default settings of the user’s browser. However, nowadays, all the browsers provide multi-tab view and the default is to open a new tab.

JavaScript is beautiful!

If you want to open a link in a new tab –the easiest way is to use target attribute of ANCHOR element in HTML. Here is how you need to do it.

<a href="http://www.example.com" target="_blank">Example.com in a new tab</a>

SEE ALSO: Open Recently Closed Tabs in Chrome

Tip 1: Here the target attribute is set to _blank. This value opens a new tab/window. If you are using a frame in your webpage (iframe or frameset) you can give name of the frame as target value to open the URL in that particular frame. For example:

<a href="http://www.example.com" target="mainframe">Open inside a frame</a>

Tip 2: Target attribute can also to use to open a link from inside a frame into the entire tab (this is called frame breaking). To do so, just give _top as the value of target attribute. And voila! Link will break the frame and open in the whole tab.

TIP 3: If you want, you can also use CSS to stylize your link to look like a button.

I hope this tip was useful for you. Please let me know if you have any questions in this regard. Thank you for using TechWelkin!