CODEWITHSUNDEEP
javascriptjquerydomjquery-events
Kamran Ahmed
Kamran Ahmed

Reputation: 12428

Accessing the parent window's content from the child window

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;
});

Upvotes: 3

Views: 2750

Answers (2)

Kamran Ahmed
Kamran Ahmed

Reputation: 12428

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;
});

Upvotes: 1

oleq
oleq

Reputation: 15895

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 ;)

Upvotes: 0

Related Questions