Open Links in a New Tab, Or Re-Use Already Existing Tab

html
Published on November 27, 2020

Sometimes it may be required that we need to open links in a new tab, however only a single tab must be created. If the new tab has been already created by previously clicking on a link, then clicking on another link will load the page in the already created tab. That is — we are creating only a single tab for several links.

This behavior is beneficial in the case where we want to limit the number of new tabs created by the page.

This can be achieved in HTML by setting the same name for the target attribute for all the given links. The name can be anything as per wish.

<!-- same target attribute -->
<a href="https://google.com" target="child">Link 1</a>
<a href="https://bing.com" target="child">Link 2</a>
<a href="https://msn.com" target="child">Link 3</a>

If opening the links with Javascript open() method, the same window name needs to be provided for the given set of links.

window.open('https://usefulangle.com', 'child-window');

Demo

Clicking on any of the below links will open a single tab.

In this Tutorial