JavaScript window.opener call parent function

Asked 14/5, 2012 at 21:5 Answered 3/9, 2015 at 15:43

I am trying to call a javascript function defined in a parent from a child window. I have two files like this:

Parent:

<html>
<head>
<title>Test</title>
<script type="text/javascript">
function foo () {
alert ("Hello from parent!");
}
function doStuff () {
var w = window.open("testa.html");
}
</script>
</head>
<body>
<input type="button" value="open" onClick="doStuff();" />
</body>
</html>

And child:

<html>
<head>
<title>Test A</title>
<script type="text/javascript">
function get() {
window.opener.foo();
}
</script>
</head>
<body>
<input type="button" value="Call Parent" onClick="get();" />
</body>
</html>

I can not, for the life of me, call the function foo from the child process. I thought this should be possible with the window.opener object, but I can not seem to make this work. Any suggestions?

Purpurin answered 14/5, 2012 at 21:5 Comment(4)

Are you accessing these pages over http:// or file:///? The file protocol doesn't have an origin, so you will always fail the SOP, rendering the opener inaccessible. – Featherstone 14/5, 2012 at 21:13

Turns out that was the problem-I was simply accessing them over file://. When I throw them in the http:// directory, it works just fine. – Purpurin 14/5, 2012 at 22:23

What is http:// and file:///? how to change it from one to other. I have the same problem? Please help. – Pond 22/6, 2015 at 3:52

@RahulKhandelwal You are probably accessing your page locally on your computer, without running a server like apache/nginx [eg - xampp in windows]. So just opening the page by double clciking it will open it in the browser with the file:/// protocol, rather than http:// – Stoops 15/12, 2017 at 7:22

Ensure you are accessing this via http:// so the Same origin policy passes and you can access opener from the child. It won't work if you're just using file://.

Magnetron answered 14/5, 2012 at 22:25 Comment(0)

Answering Rahul's question:

Every browser can load pages from server or from local filesystem. To load file from local filesystem you should put to the browser the address like this file://[path], where [path] is the absolute path to the file in filesystem (including drive letter on Windows, see http://blogs.msdn.com/b/ie/archive/2006/12/06/file-uris-in-windows.aspx for details).

To load file from local HTTP server (if you have one) you should put to address something like this http://localhost:[port]/[path], where [port] is the port where your server is running (default is 80) and [path] is the path of the file relative to the server's document root folder. Document root folder depends on the server configuration.

So, as you see, the same local file can be loaded to the browser in two ways. There is however big difference between these two ways. In the first case the browser doesn't use HTTP protocol to load the file and therefore is missing many things necessary for different mechanisms to work properly. For example AJAX doesn't work with local files, as HTTP response status is not 200, etc.

In this particular example the browser security mechanism didn't get the origin information and was preventing from accessing the parent window.

Domineering answered 3/9, 2015 at 15:43 Comment(0)

Recommended topics

Hot tags