I have a web page with a link that opens another page in a new tab. In the newly opened page, I have a link that, when clicked, should bring focus to the original tab.
The new tab is opened via the target attribute:
new tab
I thought this should work:
switch tabs
$('.back-link').click(function() {
if(window.opener) {
console.log('switching tabs');
window.opener.focus();
}
});
The console.log fires, but focus stays on the current tab. What am I doing wrong?
Could you try adding the following event listener to your new tab button instead of target="_blank" :
$('.new-tab-button').click(function(e) {
e.preventDefault();
window.open('/new-page/');
});
This way you actually open a new window instead of new tab, according to the stackoverflow thread linked below, for security reasons, it seems to only be possible to focus to (and maybe from) windows/pop-ups. I'm not sure if what you're trying to do is possible but if so this could be it.
How to change browser focus from one tab to another
Related
window.open("http://google.com", '_blank');
var childWindow = "http://google.com";
childWindow.location.href = "http://google.com";
I have an eventAddListener that loads http://google.com on a new tab with a button press, but right after it opens the new tab of google.com, I want it to REFRESH again. NOT my base page but the NEW tab page, by itself. The code I showed is just one of the examples out of 5 pages worth of google search which don't work.
UPDATE:
var win = window.open('google.com', 'New Window'); setTimeout(function () { var win = window.open('google.com', 'New Window'); },3000);
This is the best i could come up with. It opens new tab and "Reloads" the new tab rather than refresh it.
What I want is for example, you click on new tab, you paste a link then press enter, which EXECUTES the link. I basically want a javascript function which EXECUTES the link.
You can't do this.
In order to trigger a reload in the new tab/window you need to run JS in that tab/window.
The same origin policy prevents this.
If you had control over the new page then you could have an event listener running in it and post a message asking that listener to trigger a refresh.
Obviously you can't do that with Google's page.
This question, however, reads like an XY problem. If the goal is to display fresh (and not old, cached, out of date) information and the target page is not a third party one then you shouldn't be using JS to hack your way around caching. Instead set better caching rules on the target page in the first place.
I worked on something similar in the past few weeks and the code below worked for me.
index.html
<button onclick="openTab()">New Tab</button>
<script>
function openTab(){
//this opens a new tab while creating a variable name for that tab
var newTab = window.open("https://google.com","_blank");
//this refreshes that new tab
newTab.location.reload();
}
</script>
Just to prove that this works on the new tab I used the code
<script>
function openTab(){
//this opens a new tab while creating a variable name for that tab
var newTab = window.open("https://google.com","_blank");
//this will alert in the new tab
newTab.alert("New Tab");
//before the following reload code takes effect
//this refreshes that new tab
newTab.location.reload();
}
</script>
Hopefully that's what you are looking for.
From my understanding you want the new tab to refresh once opened with JavaScript instead of the current tab where you run the JavaScript code from.
That's not directly possible. The JavaScript code will only run for the tab it was executed in. The newly opened tab does not know that JavaScript code should be running. The current tab cannot pass over instructions for the new tab to execute.
However, you can select the newly opened tab manually first and then execute Javascript code to refresh the page. But that probably defeats the purpose of what you're trying to do.
I want to open the page link in a new tab after Axios response success, I have googled the solution about it but the browser keeps blocking popup. I have tried the below one but not getting work and not supported in all browsers
let newTab = window.open(); newTab.location.href = url;
_blank can help you opening new window.
check out the documentation of window.open function on w3school.
https://www.w3schools.com/jsref/met_win_open.asp
But for security reasons, browsers block such pop-ups. This is a default and desired behaviour from user security point of view.
You can override this setting using below solution.
https://blog.getadblock.com/how-to-disable-pop-up-blockers-in-every-browser-a1cccbae53e7
You could specify it as the second parameter with _blank value:
let newTab = window.open(url,'_blank');
#Dhruti if all else fails you can still have a button click trigger the new tab, just make th button hidden and trigger a click action with JavaScript. Give the button an id or ref="somename" in Vue, and a class. Set it's opacity: 0; and position it somewhere on the page where it's unnoticed. You could even set position: relative; (or absolute/fixed) and give it a z-index: 0; or -1, and then after your axios response, call
this.$refs.hiddenButton.click() making sure that you've set target="_blank" on the button.
*tip,
target="_blank" will open a new tab each time that element is clicked.
target="blank" (with no underscore) will open a new tab the first time, and then reuse that tab on each subsequent click.
I'm not sure if there's a proper term for this behavior.
User story (there are 2 tabs):
1. User clicks first link on Tab1, a new tab (Tab2) opens up
2. User clicks second link on Tab1, Tab2 refreshes to reflect second link clicked by user on Tab1.
How can I achieve this scenario?
You can open the first link in a new tab using a handle:
var tab = window.open('http://yoursite.com/action', '_blank');
and then simply change the location of the opened window when the user clicks the second link:
tab.location.href = 'http://yoursite.com/second-action';
Just adding to #Hafiz's answer
You can open a "named tab" in Javascript using window.open() call.
For example:
/* The code I am writing is extremely stupid and should never be used professionally, it's just here to convey the point */
/* you html element. */
1st Link
2nd Link
/* openLink */
function openLink(url, tabName, focus) {
var tab = window.open(url, tabName);
if(focus)
/* additionally if you want to focus on the tab, this might not work on some platform. Safari(may be on iOS) I think. */
tab.focus();
}
You can read up on open() and focus().
I want to have a link which when clicked preforms two actions:
redirects the current tab of the browser to url A.
opens a new tab directing the browser to url B
How can I do this? Is there HTML for this? Should I use javascript?
You would need to use javascript to achieve this, something along the lines of this:
$('#foo').click(function(e) {
e.preventDefault(); // stop the normal link behaviour so you can open a new window
window.open('http://foo.com/new-page'); // open new tab
window.location.assign($(this).prop('href')); // go to new page in current tab
});
Without jQuery
link // add onclick event
<script>
function f(){
document.location='/a.html'; // open in same tab
window.open('/b.html','_blank'); // open new tab
}
</script>
I have openned my application in a Internet explorer tab say "TAB1" , and by clicking a button say "button1" in the "TAB1" , a pop-up say "POP-UP1" will open, in the "POP-UP1" screen if i click a button, it will add some elements in the "TAB1"screen (Parent screen 1) .
Now i open my same application in the another tab say "TAB2" in the same IE browser window and click the "button1" which opens the pop-up in the Same
"POP-UP1" (because the window.open() function code is same with the same pop-up name). Now when i try to add some elements in the "TAB2" (parent screen 2), But instead of adding to "TAB2", it adds the elements in the "TAB1" screen.
How to write the javascript code to add elements in the correct parent screen from whichever the pop-up is initiated. I want the same pop-up to work for all the tabs openned instead of openning many pop-ups from different tabs.
Please help me.
I think is because the name of the popped window is the same:
the parent.opener of the popup is the first tab... so it will always refer to it.
All I can think of is to have a different popup-name
for each tab the site is opened.
This way you will have 2(or more) popups and each will refer to his own parent.oopener.
try this :
var myTime=new Date().getTime();
var popupName="mypopup_"+myTime;
var myPopup=null;
function popMypopup(URL){
myPopup=window.open(URL,popupName,"height=50,width=50");
myPopup.focus();
}
to pop the window use
popMypopup('your/url/here.html')
You can try to see if the parent opener of the popup refers to the current window... if it doesn't close it and reopen it.
Something like this:
var myPopup=null;
function popMypopup(URL){
myPopup=window.open(URL,"mypopup","height=50,width=50");
myPopup.focus();
if(myPopup.parent.opener!=window){
myPopup.close();
popMypopup(URL);
}
}
PS: only tested on IE ... but I believe it should work on all browsers.