$ (document) .ready () starts immediately for window window.open ()

Question

I am trying to perform operations on a popup DOM, but for some reason, the ready event fires immediately for the popup before anything in the DOM.

I know that jQuery can access the DOM of the popup using the context, and that I can do this 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 this is not a jQuery bug. If I add console.log(popup.document.readyState); immediately after var popup = window.open('/test'); he prints complete . Why really?

Any tips?

Thanks!

Answer 1

Have you tried this?

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

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

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

This question will also answer something like this: How to access the dom tree of a child window? Hope this helps you.