Open Url in New Tab or Reuse Existing One Whenever Possible

open url in new tab or reuse existing one whenever possible

You can set specific window's name, in order to open reuse the tab. The problem is, as far as the href will be the same, it won't be reloaded. So you can't obtain the refresh part easily.

So, for instance, you can have:

<a href="blabla" target="blabla">link</a>
<a href="foo" target="bar">link</a>

In JS, you can actually obtain the same, using You could also use the url as target, so that you don't need to specify manually:

<a href="blabla" onclick=", this.href); return false">link</a>
<a href="foo" onclick=", this.href); return false">link</a>

You could also generalize, and add a click listener to the document, in order to open some links in this way. Something like:

<div id="container">
<a href="blabla">link</a>
<a href="foo">link</a>

document.getElementById("container").onclick = function(evt){
if ( === "A"),;

return false;

If the page are on the same domain, at this point you could probably trying to do an empiric refresh of the page as well.

Refresh existing tab when someone clicks on new tab

You can do it like this:

<a href="otherpage.html" target="other-page">Click here</a>

The first time you click that link the page will open in a new tab, but the next times it will refresh the same tab instead.

That's how WordPress refreshes the preview when writing posts.

Edit: This will only work if the other page is opened with this link.

Open link in new window or focus to it if already open

Different browsers behave differently for and focus().
For this code'','mywindow').focus()

  • Chrome 20 opens a new tab, and focuses on subsequent open() calls regardless if focus() is called or not.
  • Firefox 13 opens a new tab, focuses on first open(), does not focus on subsequent open() calls/disregards focus().
  • IE 8 opens a new window, honors focus().
  • Safari 5 opens a new window, and focuses on subsequent open() calls regardless if focus() is called or not.

Fiddle to test with:

on Select change open tab to new url. But what if the tab is closed on the next select change?

Set a name to your window:

urlmenu.onchange = function() { this.options[ this.selectedIndex ].value, 'urlmenutab');

If no window with this name, the browser while create a new one. If already exists, the browser re-use it.

Load _blank link in the same window if clicked twice

You can assign an onclick handler to the anchor that calls the open method of the window object. The first time the anchor is clicked, it opens a new browsing tab.

Notice the second parameter to the open method (i.e., "other-window"). This is a handle to the new tab. If you want to load new content into that tab (instead of opening yet another tab), just call the open method again with that same handle as the second parameter:

(function () {

var childWindowOpen = false;

window.onload = function (event) {
var anchor = document.getElementById("child-window-link");

anchor.onclick = function (event) {
var childWindow;

if (!childWindowOpen) {
childWindow ="otherpage.html", "other-window");
} else {
childWindow ="yetanotherpage.html", "other-window");
childWindowOpen = true;
return false;

Load new URL in same tab after buttn click

<a href="" onclick="openNewTab()">
<button type="button">Click me btn</button>

function openNewTab() {'', '_blank').focus();

Related Topics

Leave a reply