16

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?

RPIBuckHunter
  • 193
  • 2
  • 2
  • 6
  • 5
    Are you accessing these pages over `http://` or `file:///`? The `file` protocol doesn't have an origin, so you will always fail the [SOP](http://en.wikipedia.org/wiki/Same_origin_policy), rendering the `opener` inaccessible. – Jonathan Lonowski May 14 '12 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. – RPIBuckHunter May 14 '12 at 22:23
  • What is http:// and file:///? how to change it from one to other. I have the same problem? Please help. – Rahul Khandelwal Jun 22 '15 at 03: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://` – DeadLock Dec 15 '17 at 07:22

2 Answers2

17

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

Joseph
  • 12,678
  • 19
  • 76
  • 115
1

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.

joutsen
  • 56
  • 4