window.open with name - google 'search results' page behaves different - javascript

I have a series of links, which I want to open in a new window. Once a window is open and a new link is clicked it should reload the window with a new url.
It works fine by providing a specified target (name) to window.open for a series of websites, but somehow after the google search page has been opened it opens up another window.
When I click Open w3school and then Open React the behaviour is as intended. If I click Open google search and then another link it pops up in a new window.
Steps to recreate:
Click Open w3school opens a new window (intended)
Click Open React reloads the page in the opened window (intended)
Click Open google search reloads the page in the opened window (intended)
Click Open w3school opens a new window (not intended)
The code below illustrates the issue.
Does anyone have an explanation of this behaviour?
<html>
<body>
<p>Click the button to open a new browser window.</p>
<button onclick="openW3school()">Open w3school</button>
<button onclick="openGoogleSearch()">Open google search</button>
<button onclick="openReact()">Open React</button>
<script>
function openW3school() {
window.open("https://www.w3schools.com", "mywindow", "popup");
}
function openGoogleSearch() {
window.open("https://www.google.com/search?q=javascript", "mywindow", "popup");
}
function openReact() {
window.open("https://reactjs.org/", "mywindow", "popup");
}
</script>
</body>
</html>

Most probably it is due the fact that the Google search results page is sent with
cross-origin-opener-policy: same-origin-allow-popups; report-to="gws"
HTTP header (while the other two pages in your sample are not), what presumably tells browser "block ties with openers if they were on different domain (origin)".
According to Cross-Origin-Opener-Policy MDN page it should have the effect you describe for Google Chrome:
If a cross-origin document with COOP is opened in a new window, the opening document will not have a reference to it, and the window.opener property of the new window will be null.
It is strange that Firefox does not seem to respect that, although it is presented as compliant there.

One possible explanation would be that some script in the opened page changes its name (window.name).
You can verify / deny that if you check window.name of the "stray / detached" popup window in the console; if it will not be mywindow then you know the cause.
You may also check window.opener - if it is null, then it could indicate that given page deliberately broke ties with your page that created the popup.

Related

JavaScript behavior change depending on how page is loaded

I am having an issue where seemingly the way JavaScript executes is changing depending on whether I open a file from a brand new browser tab (copy-pasting the link in) versus if I open the page by clicking a link from another page.
A summarized version of my code is:
<html>
<head>
<script>
try {
// ...other code...
throw new Error("error");
} catch (e) {
location.href =
"https:\/\/google.com"; // would be "https:\/\/mysite.com"
}
window.close();
</script>
</head>
</html>
If I open this in a brand new tab by copy-pasting the link, the tab will navigate to https://google.com
However, if I open the link via a hyperlink, the new tab closes immediately.
Ideally, I want the redirect to be successful regardless of how the page is loaded.
Would love to understand what's going on here as the above code snippet is from an external library that I can't modify
Appreciate any insight or help!
From MDN:
This method can only be called on windows that were opened by a script using the Window.open() method, or on top-level windows that have a single history entry. If the window doesn't match these requirements, an error similar to this one appears in the console: Scripts may not close windows that were not opened by script.
In other words, a page opened by clicking a link on another site cannot use window.close(). However, if you create it with window.open(), that restriction does not apply and you can use window.close(), which is overriding your redirect. Ctrl clicking on a link to open it in a new tab also satisfies this condition. You can verify that by running window.close() in the devtools console and seeing whether or not it closes the tab.

Switching between the same two tabs only in a browser using javascript and html

My idea of what am trying to do is
When I open a website on one tab of an internet explorer broweser and click on a link it should open a new tab in the same browser with a pdf page init ... the pdf page has a lot of links which if u try clicking on any of them they should take you back to the old tab where u managed to lunch open the pdf from and keep switching between those two tabs only
I hope the idea is clear .. am trying to do this using html and javascript ... this what I wrote but am still missing a lot here. Thanks in advance for any help provided
this piece here lunches another instant in another window
<html>
<head>
<script>
function son()
{
myWindow=window.open('','','width=500,height=500');
myWindow.document.write(" SON !");
myWindow.focus();
myWindow.opener.document.write("<p> DAD !</p>");
}
</script>
</head>
<body>
<input type="button" value="Open " onclick="son()" />
</body>
</html>
This file is where I have the pdf file built in.
<object data="Test.pdf" type="application/pdf" width="100%" height="100%">
<p>It appears you don't have a PDF plugin for this browser.
you can <a href="Test.pdf">click here to
download the PDF file.</a></p>
</object>
thanks again
In the old days, you could use a window's focus method to bring a window/tab into the foreground. However, abuse (mostly in the form of advertisers' popup windows) has resulted in browsers restricting or disabling that functionality.
If we ignore the PDF part, conceptually, this is a very simple request. First, open a window and hold on to its reference:
var pop = window.open('page.html'); // opens in new tab on most browsers
In the secondary page, switching back to the original was simple:
window.opener.focus(); // no longer works in most modern browsers
And from the first page, to switch back:
pop.focus(); // might work
In my test, I couldn't get IE 9 or Chrome 21 to switch back to the opener tab. In Chrome, I could open the second page, manually switch back to the original tab, and calling pop.focus() did bring the second tab back in focus. (IE did nothing.) I was able to force Chrome back to the opening page by calling window.opener.alert('...'); from the secondary page, but that's an ugly hack.
So it looks like you won't be able to pull this off, at least not reliably.
I'm not sure exactly what you're trying to accomplish (a TOC?), but have you thought about opening two windows? Open one with your links that covers the left-hand side of the screen, and another on the other half with the PDF.
JavaScript does not have APIs for controlling tabs. Therefore, you can't do it.
You can open windows, but you can't control if it will be a tab or window.
One alternative possibility involves NOT opening a second window or tab.
If you open another/replacing page in the current window or tab,
you can use the History object to switch between the two pages.
history.go(-1); //takes you back to previous page
history.go(1); //takes you forward to the page from which you went back.

How to put a window opened with window.open() behind the opener window?

I have a link that when clicked replaces the current page with another through the default <a> element click behaviour, but which also calls a JavaScript function to open another page in a new window. I would like the new window opened from my JavaScript function to appear behind the current window but can't figure out how to do this. In actual usage, I am feeding click thrus to a database, the link that is controlled by the window.open statement. The other link is to the clients site in a new window. I want the clients site to appear on top.
My current code is as follows:
<script language="JavaScript" type="text/JavaScript">
function countClicks(a,b)
{
window.open("http://stackoverflow.com?id="+a+"&id2="+b, "_blank");
}
</script>
test
So for the example URLs shown above I would like the (original) window with Google to appear in front of the new window with StackOverflow, but the new window always opens in front.
Try using window.focus() at the end of your existing function:
function countClicks(a,b) {
window.open("http://stackoverflow.com?id="+a+"&id2="+b, "_blank");
window.focus();
}
That should bring the existing window back to the front, noting that behaviour may vary between browsers and depending on popup-blocking settings, etc.
Or you could just swap the two urls, i.e., put the StackOverflow url in the href with the appropriate query string specified directly rather than in JS, and put the Google url in the window.open() call.
Popup behavior varies based on browser/user settings. I haven't been able to replicate the open behind behaviour myself, but I believe what you're looking for is .focus().
Try:
window.open("http://stackoverflow.com?id="+a+"&id2="+b, "_blank").focus();

Google Chrome Extension

How do I open a link in a new tab in the extension HTML.
E.g.
clicks on icon
sees Google chrome window which has the window.html
inside there are two links, one link to open a link in a new tab, other in the original tab.
I used window.location, doesn't work like that.
If the page is indeed in a google chrome extension, you can force the browser to open the page in a new tab using javascript (which you know is enabled sine you are a google chrome extension).
chrome.tabs.create({url:"http://somewhere", selected:true});
Your extension will need the tabs permission.
See: http://code.google.com/chrome/extensions/tabs.html
I don't know why this question has two upvotes, but anyway you can try using the target attribute for anchor elements.
<a target="_blank" src="http://myFancyUrl">This is a link to a new tab</a>
However, it won't open in a new tab unless the user has the navigator configured that way (usually does).

Firefox sidebar extension link loaded into a new browser tab. How-To?

I have a friefox sidebar extension. If its opened by clicking on the toolbar icon I load it with a webpage ( that I have authored ). Now, if the user clicks on the link on the webpage ( thats loaded into the sidebar ) I want the linked webpage to open up in a new tab of the main window. I tried with this in my webpage markup:
<a target="_content" href="http://www.google.com">Google</a>
But the link opens up in the tab that has focus and not in a new tab.
Please help.
Thanks.
If you use target="_blank" instead, FF (version 3) should open a new tab for it. Haven't tried it from a sidebar, but it's worth giving a shot.
Actually, there is no way to load a webpage ( whose link was in another webpage loaded into the sidebar extension ) onto a new tab in the browser. The only way is to use javascript. That has to execute under privileged conditions ( meaning as part of an extension ) like below:
gBrowser.addTab("http://www.google.com/");
EDIT:
The above technique of adding a browser tab did not work in this case. According to this article code running in the sidebar does not have access to the main window. So first up I got access to the browser window before using gBrowser. Here is the code taken from the website that I used and works properly:
var mainWindow = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIWebNavigation)
.QueryInterface(Components.interfaces.nsIDocShellTreeItem)
.rootTreeItem
.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIDOMWindow);
After I got access to the browser window I accessed gBrowser through the getBrowser function like below:
mainWindow.getBrowser().addTab("http://www.google.com/");
The opens up a new tab in the main window browser.
Google
This is more dependent on the browser that is being used. Firefox and Opera, and I'm sure the newest IE, display "new windows" as a new tab unless otherwise specified by user preference.

Categories