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 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.
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 window.open() and focus().
For this code window.open('www.sample.com','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: http://jsfiddle.net/jaraics/pEG3j/
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() {
window.open( 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 = window.open("otherpage.html", "other-window");
} else {
childWindow = window.open("yetanotherpage.html", "other-window");
}
childWindowOpen = true;
return false;
}
};
}());
Load new URL in same tab after buttn click
<a href="https://w3schools.com/" onclick="openNewTab()">
<button type="button">Click me btn</button>
</a>
<script>
function openNewTab() {
window.open('https://google.com', '_blank').focus();
}
</script>
Related Topics
Set a Callback Function to a New Window in JavaScript
Close a Div by Clicking Outside
How to Get All the Applied Styles of an Element by Just Giving Its Id
Invert Text Color on Mouse Hover
How to Break Line in JavaScript
Cannot Access CSSrules from Local CSS File in Chrome 64
Responsive Horizontal Page Sliding
Need to Find Height of Hidden Div on Page (Set to Display:None)
Jquery: How to Listen for Dom Changes
Why Aren't Some Technically Serializable Input Properties Serializable
Decoding Url Parameters with JavaScript
How to Format Vuetify Data Table Date Column
How to Mute All Sound in a Page with Js
Python Library for Rendering HTML and JavaScript
Angular2 Router 2.0.0 Not Reloading Components When Same Url Loaded with Different Parameters
How to Disable the Save Password Bubble in Chrome Using JavaScript