open url in new tab or reuse existing one whenever possible - javascript

Now I have a link
link
However, this always open up a new tab. I want the following effect
If the user already has a tab with the same URL, reuse that tab, and refresh if possible
Otherwise, open a new tab
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.

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:
link
link
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:
link
link
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">
link
link
</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.

setting up target="child" would refresh the current tab if already opened
ABcd
Defg

Related

How to recall browser tab with previous instance on same page

I have a page with a few links.
Each link opens in a new tab.
The next time I click a given link, I want it to recall the same tab where it was previously opened.
Is it possible? How?
All pages come from the same domain.
I've seen this answer:
Check if my website is open in another tab
It seems possible to store the URIs in localStorage, for repetitions detection.
I think this technique will allow me to detect repetitions, but I can't figure out how to aim at the specific tab (activate it, bring it to the front).
I don't control the server, need to implement it in the client (via Tampermonkey).
For the curious, I work a lot with BitBucket issues.
The page with the links is the issues listing, the other pages are the individual issues.
I want to be protected from opening the same issue twice, update both versions, and have a data loss.
Additionally, each page can have two different URIs, one for viewing and the other for editing. But I think I can solve it with JS.
Recalling a Browser Tab by Name
You can first specify a name for each tab you create, by using window.open():
let newWindow = window.open(newUrl, newWindowName);
or by using target attribute in an anchor tag:
Make New Window
If you then call window.open with the name of an existing tab, that will use the existing tab. If the window by that name doesn't exist, window.open will create a new window (or tab).
MDN web docs page for Window.open
Bringing Window to the Front
Using window.open() alone may not be enough to bring the window to the front. That may be possible with a different function, window.focus(), which issues a request to bring the window to the front. Combining the two:
window.open(myUrl, myWindowName).focus();
Caution: A browser's user preference setting may still prevent focus() from bringing the window to the front, so this is not guaranteed to work. From MDN web docs:
It may fail due to user settings and the window isn't guaranteed to be frontmost before this method returns.
You can get the previous page's URL with the following:
let prevURL = document.referrer;
You can get the URLs from all open tabs with the windows.getAll() function.
From this answer - You cannot programmatically focus the browser to a specific tab due to security concerns. Consider updating the title to notify the user with document.title = {{new title}}

Get previous page URL, Open New Window, then Redirect through Javascript

I'm stuck using a CMS that only gives me the ability to modify the content of the <body>, so when I want to redirect people, I've used this
<script type="text/javascript">
window.location = "http://www.example.com/"
</script>
So, yes, the page loads first, and then 5ms later, the redirect happens, and it's worked for all intensive purposes. Now, I'm wondering if I can use javascript to do something else.
Is it possible to open a new browser tab, with a specified URL, and then redirect the user back to the previous page, through Javascript?
Many thanks, SO.
EDIT - Whether it opens a new window or tab, to be honest, is not as important as it actually functioning. I need Javascript to determine the prior page (if possible), then open a new window/tab to a URL I specify, and then redirect the current window/tab to it's prior page. Some are saying that window.open only works on a click event, which will not work for what I am trying accomplish either... just fyi.
So, literally, without clicks, I need Javascript to do the following -
Determine the prior/previous/last page the user came from, store it as a variable
Open a new window or tab, to a specified URL
window.location back to the prior page, which I stored as a variable
Hope that makes sense.
Depending on the user's browser setting using window.open can open the new window in a new tab instead but you CANNOT directly control this through the browser. It is all down to the user's settings.
To open a new window:
window.open("http://www.google.com", "windowName", "window options (optional parameter)");
Then simply use:
history.back();
You can also use the referer property:
var previousUrl = document.referrer;
For more info on window.open, see: http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
For more info on the document.referrer property, take a look at: http://www.netmechanic.com/news/vol4/javascript_no14.htm

Redirect after clicking an external link and only open one tab/window

I have created a jsp for external clients of my application to use to link to the web client. They can specify which client they are in the URL so that when the link opens a window it is named and any other links from that client will open in the same window. Here's an example URL:
mysite.com/redirect.jsp?fromClient=mine&page=awesome
The problem is that when you click on this link, for example from an email digest, it opens the redirect.jsp page which uses window.open() to open the desired page. From the above link, the page that would open would be:
mysite.com/index.jsp?page=awesome
So then I have two pages open, when really I only want one. And since I'm not using javascript to open the first page (it's a link), I can't use window.close() to close it. I've tried working around using window.open('','_parent','') and window.open('','_self','') but neither works.
I know there has to be a better way to redirect than to open a second window from my jsp page, but I don't know what that better way is. Thoughts?
EDIT
Primary goal is for users of external clients to be able to click links in that client and have all the links take them to the same window/tab in a browser. I'm using window.open right now because I can parse the link and get the client name and then supply that in the window.open function.
EDIT 2
I always end up being too vague in these questions. Ok, here's the setup:
An email digest contains a link that looks like
mysite.com/redirect.jsp?fromClient=emailDigest&pageNum=4
Currently, when that link is clicked on, it opens a browser (duh) and then the redirect.jsp page parses that link to get the client name, in this case emailDigest. It then calls window.open('mysite.com/index.jsp?pageNum=4','emailDigest'). This creates a new window with the name emailDigest unless a window/tab with that name already exists, in which case it merely updates the URL in that window with the new one.
I want to either be able to close the original window (the one with the redirect.jsp address) or not have to open that initial window at all.
NOTE
As there are many different clients that want to be able to do this, I cannot guarantee that they will be creating the link with HTML so the target attribute is not the answer.
The correct answer is "No, it cannot be done". If you do not open a window with Javascript then you cannot close it with Javascript. I would always have to create at least 2 windows, which is not what we wanted.
I think you're looking for window.location instead of window.open.
Please use window.location.replace("http://mysite.com/index.jsp?page=awesome");
Reason :
replace(url):Replace the current document with the one at the provided
URL. The difference from the assign() method is that after using
replace() the current page will not be saved in session history,
meaning the user won't be able to use the Back button to navigate to
it.
As haynar says above, why do you open a window and not either:
<!-- content contains the refresh delay in seconds and the target url -->
<meta http-equiv="Refresh" content="1; URL="http://mysite.com/index.jsp?page=awesome">
or use javascript to do the same:
window.location.href = "http://mysite.com/index.jsp?page=awesome";
either works fine and will leave you with one window open.
To get the named window use a targeted link:
Mysite.com
This will automatically set the name property of the opened window.

Distinguish link opened in current tab vs. new tab

Example of what I want to do: On Facebook, clicking a link to open it in the current tab will trigger some JavaScript rather than opening the link. However, opening it in a new tab (either by right-clicking or by holding Ctrl/Cmd) will open the link without calling any JavaScript.
I'd like to do the same with my links (have link behaviour dependent on the target). I have the onclick event handler return false; to avoid opening the link; but this causes Ctrl+clicking to fail to open the link. How do I achieve this?
EDIT: I do not want links to forcefully open in new windows. IF a link is opened in a new window, I want it to follow the href as usual. However, IF the link is opened in the current window, rather than following the link in the current window, I want to have some JavaScript run.
Facebook does this to open an image in a popup "theatre" if you open it in the current window, and open it in a full page if you open it in a new window.
Note that capturing the click event on links and using preventDefault() or return false causes Cmd+Click (open in new tab) to fail. In any case, this should work regardless of how the link is opened - click, Enter key, etc.
EDIT 2: It seems that hashchange / HTML5 pushState is the correct way to go about this
You can set the href of the anchor pointing to correct url. This way right click and open in a new tab or window will work fine.
Use jQuery to bind the click event handler to the anchor like this.
$('a').click(function(e){
//Do whatever javascript operation you want.
if(!e.ctrlKey){
e.preventDefault();//Stop the page to navigate to the url set in href
}
});
Demo

Opening a new tab in JS

Is it possible to open a new tab in JS?? I tried googling it but most answers were answered before about years that it was not possible then, so is it possible now?!
Thank in advance :))
another question if possible, can we open to separate Urls using the same tag? I mean to open 2 diff tabs when clicking on one hyperlink
Yeah. You could do this in Javascript using window.open('target.html','mywindow','width=400,height=200') added to the onclick event.
See this for more info.
Opening a new tab in modern browsers is the same as opening a link in a new window by setting the target attribute. With HTML you do this by:
Click me
(See HTML a target attribute)
With javascript you do the same by window.open(url, '_blank'...) but remember that most browsers will block this unless it is done on the onClick event, so opening a new tab automatically after some timer has gone off for example is not a good idea.
You can also use link text if it's a link that should open in a new tab.
If you wanted to open both pages at the same time you could always combine both of the techniques mentioned above.
Double Link
This will open the pages thispage.html and thatpage.html simultaneously.
dont forget to add the title attribute to your link as opening new windows/tabs without warning users is generally frowned upon. Something like;
title="Clicking this link will open two new tabs"
should keep the standardistas off your back.
Also, you may want to separate your onclick event from your html as again munging them all together really isnt best practice. If you are using jquery then assign the onclick event by inserting a small piece of JavaScript at the top of your page as such;
$(function(){
$('#the-link-id').click(function(){
window.open('thatpage.html');
});
);

Categories

Resources