Question

I open a window/tab in Chrome:

childWin = window.open('child.html');

Then I try to call a function in the child:

childWin.objReceiver( {foo: 'blah', zoo: 'bing'} );

But I get the following 2 errors in Chrome parent (Firefox works fine):

Unsafe JavaScript attempt to access frame with URL file:///C:/Users/Slava/Documents/AMP/app_poc/test/child.html from frame with URL file:///C:/Users/Slava/Documents/AMP/app_poc/test/index.html#. Domains, protocols and ports must match.
Uncaught TypeError: Property 'objReceiver' of object [object Window] is not a function

Please advise.

Answer 1

When testing this kind of thing, you want to serve the documents from a real web server process (so the URL is http://...). The security policy browsers apply to local resources (your file:///... URLs) can be more restrictive than same-origin policies for a web resource. (Specifically: Some browsers treat local files as not matching any origin, even another local file in the same directory.)

Just install a simple web server (or a complex one, if you prefer 🙂 ) on your machine.

Another thing to be wary of is that you probably can’t call a function on the child window immediately, because the window may not be loaded yet. So you can watch for objReceiver showing up in the child, like so:

jQuery(function($) {

  $("#target").click(function() {
    // Open the window
    var wnd = window.open("http://jsbin.com/ofigis/1");

    // Give it a 10th of a second to appear
    display("Window open, waiting for it to appear...");
    setTimeout(watchForWindow, 100);

    // Our function watching for it        
    function watchForWindow() {
      // Is it there?
      if (wnd.objReceiver) {
        // Good, we're done waiting -- send the message
        wnd.objReceiver({
          foo: "blah"
        });

        display("Message sent");
      }
      else {
        // Not there yet, keep waiting...
        setTimeout(watchForWindow, 0);
      }
    }
  });

  function display(msg) {
    $("<p>").html(String(msg)).appendTo(document.body);
  }

});

Live Example | Source

(I’m using jQuery there just for convenience, none of the fundamental bits rely on it)