Accessing the parent window's content from the child window

Question

I am opening a new window when a button is clicked and then appending the content from this window to the window that has been opened, the jQuery code that I'm using is:

$(".printBtn").on("click", function () {
    var w = window.open("", "Purchase Report", "width=800, height=1100");
    var wi = $(window);

    $(w.document.body).append(wi.find("#datatable_example"));

    return false;
});

The problem is, a new window does open but the content from the parent window is not being appended to the newly opened window. I then tried to append wi.find("#datatable_example").html() but that didn't work either.

Can any one please have a look and tell me what I am doing wrong here?

UPDATE

Tried the following from the "duplicate question", but didn't work:

$(".printBtn").on("click", function () {
    var w = window.open("", "Purchase Report", "width=800, height=1100");

    $(w.document).ready(function () {
        $(w.document.body).contents().append($(window).find("#datatable_example"));
    });

    return false;
});

Protip, if you want to check if a selector matched anything, look at length (will be 0 if nothing is found): `console.log(wi.find("#datatable_example").length)` — xec, Aug 12 '13 at 11:16
possible duplicate of [How can I access the dom tree of child window?](http://stackoverflow.com/questions/1258563/how-can-i-access-the-dom-tree-of-child-window) — oleq, Aug 12 '13 at 11:16
@oleq! and why is that? I am using a completely different way to achieve that. - Opening an empty URL window i.e. a window that'll have no contents so it won't take any time to load, would it? - I am trying to access the paren't windows content, which has no relation to the child window, and still having a problem that I am unable to retrieve the child. — Kamran Ahmed, Aug 12 '13 at 11:23
@KamranAhmed Er. Sorry, you're right. I posted an answer below. — oleq, Aug 12 '13 at 12:21

score 1 · Accepted Answer · answered Aug 12 '13 at 13:13

The problem was, I was using var wi = $(window) instead of var wi = $(window.document). Here is the working code:

$(".printBtn").on("click", function () {
    var w = window.open("", "Purchase Report", "width=800, height=1100");
    var wi = $(window.document);

    $(w.document.body).append(wi.find("#datatable_example"));

    return false;
});

score 0 · Answer 2 · answered Aug 12 '13 at 12:18

The root of your problem is same origin policy that won't let you observe load events for external domains. If you try this in developer console while browsing SO, everything's fine:

var child = window.open( 'http://stackoverflow.com' );

child.onload = function() { 
   alert( 'Popup loaded!' ); // Fired!
};

However if you try to open a page from other domain, it fails:

var child = window.open( 'http://stackexchange.com' );

child.onload = function() { 
   // It's not gonna be fired unless you run it from stackexchange.com.
   alert( 'Popup loaded!' ); 
};

The same thing happens when you call window.open() or window.open( '' ) as it tries to load about:blank page which is out of your domain's scope and that's why your browser won't fire attached events (same for child.addEventListener( 'load' )). Also note that the protocol must match as well.

The workaround introduces setTimeout to run the callback in a separate JS thread, hopefully late enough to have DOM ready at that time:

var child = window.open();

setTimeout( function() {
    var doc = child.document,
        p = doc.createElement( 'p' );

    p.innerHTML = 'Hello world!';
    doc.body.appendChild( p );
} );

It works for me in latest Chrome, however different browsers sometimes do strange thing in such edge cases so you may need to tune this code with greater delay, sequential check or something else if it fails in your case.

So go ahead and tell us if it worked for you as I'm curious whether such workaround is fine for production code ;)

Accessing the parent window's content from the child window

2 Answers2