Now I have a link
<a href="blabla" target="_blank">link</a>
However, this always open up a new tab. I want the following effect
How can I achieve this using JavaScript?
It's OK if there're only some browser-specific methods, so users of browsers without corresponding support will "fallback" to the always-new-tab way.
The only time it is recommended that you open a link in a new tab is when opening in the same screen would interrupt a process (e.g. when a user is filling out a form or viewing a video). Linking in the same tab or screen in these situations could cause the user to lose the work they've done or have to start over.
Method 1: Ctrl+Click The first method requires a keyboard and a mouse or trackpad. Simply press and hold the Ctrl key (Cmd on a Mac) and then click the link in your browser. The link will open in a new tab in the background.
You just need an anchor ( <a> ) element with three important attributes: The href attribute set to the URL of the page you want to link to. The target attribute set to _blank , which tells the browser to open the link in a new tab/window, depending on the browser's settings.
Open Link in New Tab Generally, you can hold down the control button – or the command key on a Mac computer – to open a link in a new tab. You can also click on a link and hold down the mouse without releasing, dragging the link to the browser's tab bar to open it in a new tab.
Don’t Open New Tabs With Same URL in Chrome. You can reuse already opened tabs by instructing Chrome to jump to them whenever we open new tab with same URL. This is possible with the help of extensions that will redirect you to existing tab if it finds you opening duplicate tab of same URL.
This is possible with the help of extensions that will redirect you to existing tab if it finds you opening duplicate tab of same URL. #. Duplicate Tab Helper Duplicate Tab Helper prevents duplicate pages at the moment new tabs are opened.
You can reuse already opened tabs by instructing Chrome to jump to them whenever we open new tab with same URL. This is possible with the help of extensions that will redirect you to existing tab if it finds you opening duplicate tab of same URL. #. Duplicate Tab Helper
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.
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 window.open
. You could also use the url as target
, so that you don't need to specify manually:
<a href="blabla" onclick="window.open(this.href, this.href); return false">link</a> <a href="foo" onclick="window.open(this.href, 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> </div> <script> document.getElementById("container").onclick = function(evt){ if (evt.target.tagName === "A") window.open(evt.target.href, evt.target.href); return false; } </script>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With