$(document).ready() fires immediately for window.open() context

Question

I'm trying to perform operations on the DOM of a popup window, but for some reason the ready event fires immediately for the popup, before there's anything in the DOM.

I know that jQuery can access the DOM of the popup window by using context, and that I can manage to do it by using setTimeout to delay any action until a reasonable amount of time has passed.

http://jsfiddle.net/GVcjn/

(function ($) {
    $(function () {
        var popup = window.open('/test');
            // JSFiddle 404 page

        $(popup.document).ready(function () {
            // Should fire when the DOM of the 404 page has loaded...

            $('h2', popup.document).css('color', '#FF0000');
                // Change the color of the header to red.

            console.log($('h2', popup.document).length);
                // Should log 1
                // Logs 0, though, because this function fires immediately, before the DOM loads.
        });

        setTimeout($.proxy(function () {
            // This will definitely fire after the DOM of the 404 page is loaded.

            var popup = this;
            $('h2', popup.document).css('text-decoration', 'underline');
                // This works, because it waited long enough.
                // But I don't want to guess how long it will take the DOM to load....
        }, popup), 5000);
            // After 5 seconds...
    });
})(jQuery);

Also, I know it's not jQuery's fault. If I add console.log(popup.document.readyState); immediately after var popup = window.open('/test');, it prints complete. Why, though?

Any advice?

Thanks!

Answer 1

Have you tried this?

popup.onload = function () {
  //lot of things
};

With jQuery load, according to the documentation http://api.jquery.com/load-event/ is:

$(popup).load(function() {
  // things
});

This question answer something similar too: How can I access the dom tree of child window? Hope it helps you