One page open another page(eg. openerdemo.html) using the window.open() method, but the popup page cannot access any property of the opener page.
Opener page code:
<head>
<meta http-equiv="content-type" content="html/text"; charset="utf-8" >
<title>windowdemo</title>
<script language="JavaScript">
function openWin(thisurl) {
popWin = window.open(thisurl, 'popupPage', "width=480,height=272");
}
</script>
</head>
<body>
<input type="button" value="open" onClick="openWin('openerdemo.htm')"/>
</body>
Popup page(openerdemo.htm) code:
<html>
<head>
<meta http-equiv="content-type" content="html/text"; charset="utf-8" >
<title>windowdemo</title>
<script language="JavaScript">
function closeWin() {
window.opener.close();
window.close();
}
</script>
</head>
<body>
<h1>close all</h1>
</body>
I use javascript console in Chrome, enter 'window.opener' to the cmd line of popup window, it's return:
window.opener
'Window {}',
That means the opener window is not null, but its all property missing. However, if one page opens a new page like this:
popWin = window.open('', 'popupPage', "width=480,height=272");
popWin.document.write("this is popupPage");
The popup page's window.opener is ref to the opener window, and just can control the opener window with the 'window.opener' object.
ex:
<body>
<script type="text/javascript">
myWindow=window.open('','','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
myWindow.focus()
myWindow.opener.document.write("This is the parent window")
</script>
</body>
I test this code in FF, IE and chrome.
Can anyone tell me how to control the opener window in popup page?
It would work fine, but you're making a cross-domain request. If the window you are opening and the window you opened it from are on the same domain, you wouldn't have a problem
Note: This may be classified as a cross-domain request when you are not using a webserver, but just using the file system (file:/// is your protocol). I haven't tested it - rest assured, however, that when you get it on the web, all will be well as long as both the opener and the openee are server from the same domain.
EDIT
I just did a quick test on my local file system and this is indeed the case - it's classified as a cross-domain request and is forbidden for security purposes - again, it won't be a problem when you put it on a webserver and serve both pages from the same domain.
Related
<!DOCTYPE html>
<html>
<body>
<h1>The Window Object</h1>
<h2>The open() and close() Methods</h2>
<button onclick="openWin()">Open "myWindow"</button>
<button onclick="closeWin()">Close "myWindow"</button>
<script>
let myWindow;
function openWin() {
myWindow = window.open("https://google.com", "", "width=2600,height=500");
gg = myWindow.location.origin
alert(gg)
}
function closeWin() {
myWindow.close();
}
</script>
</body>
</html>
im aware that because of security reasons browsers wont let you read other tabs
but there is something i wanna know
if the parent can open the popup page and close the popup page that means the popup page is still can be accessed through parent page
but is there any slightest chance where the parent page can read url of the popup page
using javascript or any library ?
if so how ?
considering there is no content security headers present for that popup page
iframe is getting blocked because x-frame headers
all i wanted is to just grab the url
You could access it with myWindow.location.href but only if both windows are on the same subdomain.
Otherwise it is impossible due to same origin policies.
Your best option would be to store the url in a variable
I have a simple HTML code to print the page. Below is the code:
<!DOCTYPE html>
<html>
<head>
<script>
function printPage()
{
var w = window.open("http://www.sigmaaldrich.com/catalog/CofADocRequest.do?symbol=209104&LotNo=MKBP0842V&brandTest=SIGMA","_self");
window.focus();
window.print();
}
</script>
</head>
<body >
<input type="button" onclick="printPage()" value="print a div!" />
</body>
</html>
What the code does is, it displays a button, on clicking that button it calls a function. The function uses open() to open a new URL in the same page by using the “_self ” parameter.
As we can see in the code, the print() is being called after the call to open method. But in my browser IE11, the print pop is being shown befor loading the page.
Due to this I am not printing the correct page.
Can anybody help me on this.
The problem is that window refers to the current window, which is the original.
By opening a new window in self you replace the page, this is basically a redirect.
And if you open it via popup and print it as w.print() than you run into cross-origin security error.
You could use iframe to this with a proxy as shown here
How do print specific content inside the iframe
and
here
How do print specific content inside the iframe
I have two local .html files in the same folder. One page opens a window with the other page, and attempts to call a function in the newly opened window. However, the function call fails, and I get this in the console:
Unsafe JavaScript attempt to access frame with URL file:///***/A.html from frame with URL file:///***/B.html. Domains, protocols and ports must match.
This happens on both Chrome and Webkit (Mac). Is there any way I can either: disable the cross-domain checks for the file:// protocol, or call a javascript function in a different local file?
You can use window.postMessage to do something like this:
The initial window html file:
<!DOCTYPE html>
<html>
<head>
<script>
var otherWindow;
function openOther() {
otherWindow = window.open("other.html", "otherWindow");
}
function otherFunc() {
otherWindow.postMessage("otherFunc", "*");
}
</script>
</head>
<body>
<div onclick="openOther()">Open the other window</div>
<div onclick="otherFunc()">Call the other window's function</div>
</body>
</html>
Html for the second window:
<!DOCTYPE html>
<html>
<head>
<script>
window.addEventListener("message", function(event) {
alert("The other window's function executed.");
}, false);
</script>
</head>
<body>
<div>This is the other window.</div>
</body>
</html>
Here's a good reference for window.postMessage.
Basically I have a website that offers a help system. When activated this help system triggers a popup in which the help content appears.
As the users then navigates around the site, through the use of a cookie I detect (that I set when the window is first opened and clear when the user closes the window) whether the window is still opened and load new help content for the new page.
As it turns out the only way to load new content into this popup window is to pop open a new page with the same name (so that we don't multiple popups opening everywhere) with the desired content.
This works fine the first time the user triggers the popup, but after that when I try and automatically try and pop open a window, I have problems with most browsers.
Just wondering if anyone has any ideas on how I can get this to work correctly?'
UPDATE
#Rob
Here is that I have:
Page1.html
<html>
<head>
<script type="text/javascript" src="MainPopup.js"></script>
</head>
<body>
<h1>Page 1</h1>
Next
Click
<script type="text/javascript">popupWindowIfCookieSet('Help1.html');</script>
</body>
Page2.html
<html>
<head>
<script type="text/javascript" src="MainPopup.js"></script>
</head>
<body>
<h1>Page 2</h1>
Prev
Click
<script type="text/javascript">popupWindowIfCookieSet('Help2.html');</script>
</body>
</html>
</html>
Help1.html
<html>
<head>
<script type="text/javascript" src="Helper.js"></script>
</head>
<body>
<h1>Help 1</h1>
</body>
</html>
Help2.html
<html>
<head>
<script type="text/javascript" src="Helper.js"></script>
</head>
<body>
<h1>Help 2</h1>
</body>
</html>
MainPopup.js
var windowLocation;
function setHelperWindow(new_windowLocation){
windowLocation = new_windowLocation;
}
function popup(url){
try{
windowLocation.href = url;
} catch(e){
windowLocation = window.open(url, "HelperWindow").location;
}
}
function popupWindowIfCookieSet() {
//Stuffhere
}
function setPopupActiveCookie() {
//Stuffhere
}
Helper.js
(function(){
var failures = 10*60; //Cancel poller after 1 minute without `opener`
var poller = setInterval(function(){
try{
// Attempt to send the current location object to window.opener
window.opener.setHelperWindow(location);
}catch(e){
if(!window.opener && failures-- < 0) clearInterval(poller);
}
}, 100);
})();
Unfortunately this doesn't work. What should happen is that if i pop open the Helper page from Page1, when I then go to Page2.html, the popup window showing the Help1.html content would switch to Help2.html.
Currently its not doing this. Any ideas.
If your whole website is hosted at the same domain, you can use the window.opener property, in conjunction with some adjustments at your page.
Main: Declare a variable windowLocation, and functions setHelperWindow and popup
Main-popup: Open a new window, and store a reference in variable windowLocation
Helper-window: Create a poller, which attempts to invoke the setHelperWindow of the window.opener object. If the window.opener window has closed, the poller will terminate.
Because the windowLocation variable is getting updated all the time (either after using window.open() or by the poller function in the popup), the possibility of getting blocked by a popup blocker is reduced severely.
Note: Both scripts has to be included at each main and helper page:
<script src="filename.js"></script>
Helper.js
(function(){
var failures = 10*60; //Cancel poller after 1 minute without `opener`
var poller = setInterval(function(){
try{
// Attempt to send the current location object to window.opener
window.opener.setHelperWindow(location);
}catch(e){
if(!window.opener && failures-- < 0) clearInterval(poller);
}
}, 100);
})();
MainPopup.js
var windowLocation;
function setHelperWindow(new_windowLocation){
windowLocation = new_windowLocation;
}
function popup(url){
try{
windowLocation.href = url;
} catch(e){
windowLocation = window.open(url, "HelperWindow").location;
}
}
Example: Usage (main)
Click
Specifying a name for the window like you have done should work, e.g.
window.open('help1.html', 'help');
Then, e.g. when page2 loads,
$(function () {
window.open('help2.html', 'help');
});
Bear in mind though that the popup blocker is going to stop this behaviour from working unless you add an exception. E.g. in chrome, options >> under the bonnet >> content settings >> pop-ups >> manage exceptions.
Disclaimer: I'm not a fan of using popups and would use a lightsout box instead for your online help, loading the content via an ajax request.
I am trying to code this for hours and still couldn't do it. It keep tell me "Permission Denied".
Here is what I am trying to accomplish. This pretty hard to explain please follow the example below.
For example. domain111.com and domain222.com.
When I am on domain111.com i click on the popup link , it will pop-up the domain111.com/popup.html then it redirect me to domain222.com. On this domain222.com it will redirect to couple pages before it redirect back to domain111.com with the result. I want to send the result from domain111.com to domain111.com.
The process is like below.
Domain111-popup to-->Domain111-redirect-->Domain222-redirect xxx Domain222 pages then redirect to-->-Domain111---SEND to parent window->Domain11
Here is my code.
File name 1.hml on domain111.com
<script type="text/javascript">
function IamParent() {
alert('I am the parent of this window')
}
function PopUP() {
window.open("http://domain222.com/2.htm", 'ALpop').focus();
}
</script>
<body>
<a href="#void(0);" onclick="PopUP();" >Click</a>
</body>
File name 2.html on domain222.com
<head>
<title></title>
<meta http-equiv="refresh" content="1;url=http://domain111.com/3.htm?Result=Yes" />
</head>
Filename 2.htm on domain111.com
<script type="text/javascript">
parent.IamParent(); //execute the function from the same domain111.com/1.htm
</script>
Please don't suggest AJAX or web request because it will not work with this case.
Thanks for reading.
Parent windows in other domains are inaccessible due to a security restriction requirement in the JavaScript engines. This applies to all browsers. It is a cross-site scripting attack prevention that cannot be disabled.