Javascript pop-up window document is never "ready"

Question

I'm using Javascript to open a blank window, populate it with the bare minimum and inject a script tag to include JQuery, but the window property readyState never gets past loading, therefore JQuery never triggers. Here is the demo on jsFiddle. I can't figure out why the popup window doesn't update its readyState.

var popup = window.open("", "popup", "height=500,width=700");
var doc = popup.document;
doc.write("<!doctype html><html><head></head><body></body></html>");
var script = doc.createElement("script");
script.type = "text/javascript";
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";
script.onload = function() {
  console.log(doc.readyState);
  popup.$(document).ready(function() {
    console.log(doc.readyState);
  });
}
doc.getElementsByTagName("head")[0].appendChild(script);

Here is similar code without JQuery--same problem with the readyState window property never going beyond "loading".

var popup = window.open("", "popup", "height=500,width=700");
var doc = popup.document;
doc.write("<!doctype html><html><head></head><body></body></html>");
console.log(doc.readyState);

I think it's a **sandbox restriction** since the popup page URL hasn't the same domain to your script. — Florent, Jul 12 '12 at 13:51
Wouldn't a blank page (using "") be on the same domain? I don't get any errors in Chrome that restrictions apply. Plus, in my full code, I continue to invoke JavaScript calls to the popup, knowing that it is ready, technically--even if the window doesn't think so. Just not as clean as I'd like it. — scader, Jul 12 '12 at 13:53
Any reason why you're using the ancient window.open and not using one of the many jQuery modal dialogs? — danwellman, Jul 12 '12 at 14:01
This code sits inside an iFrame of a window I don't control. If the iFrame dimensions are too small, this feature allows the user to open the content in a pop-up window set to a larger size. — scader, Jul 12 '12 at 14:10

score 6 · Accepted Answer · edited May 23 '17 at 12:01

If you never set the URL, then the ready state isn't going to change. It will either be "initialized" or "loading" - depending on your browser. You can see this update by setting the document.location in the console window of your popup window like the command below:

console.log(document.readyState);
document.location = "http://yourdomain.com";
console.log(document.readyState);

If you sent the location to a domain other than your domain, you will not have security to modify the window object. A way to get around this is to use an iframe and set the source - like so:

var nw = window.open('', "MyWindowID", "fullscreen=no, toolbar=no, menubar=no,status=no,location=no");
var html = '<iframe id="document-{aid}" style="width:100%;height:100%;" src="http://www.google.com"></iframe>';
nw.document.write(html);
nw.focus();

See: https://stackoverflow.com/a/1443839/1220302

A note on this is to try wrapping your popup in $(popup) and hook the ready event.

This should work for you:

var popup = window.open("", "popup", "height=500,width=700");
var doc = popup.document;
doc.write("<!doctype html><html><head></head><body></body></html>");
var script = doc.createElement("script");
script.type = "text/javascript";
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";    
$(popup).ready(function(){
    console.log('loaded');
});

That's a little confusing, because if you change your log to `console.log(doc.readyState)` then it still reports as "loading". Why does JQuery think the document's ready when the readyState hasn't change? Looking at the JQuery script, it appears to run off of readyState. — scader, Jul 12 '12 at 15:07
It looks like readyState isn't clean across all browsers, and JQuery actually sets DOM event handlers to handle document ready. I remain curious as to why calling from the parent window's jQuery works, but not the JQuery of the popup window itself, but none the less it's a valid solution so I'll mark this accepted. — scader, Jul 12 '12 at 16:07
I've updated the answer with a little more information on what's going on that you might find useful. — anAgent, Jul 12 '12 at 16:50

score 1 · Answer 2 · answered Jul 12 '12 at 14:00

1

Because there is no url to popup, it is immediately ready. Any assignment to it's "ready" with jQuery after window.open command is complete becomes irrelevant. It won't ever fire because it's already too late.

answered Jul 12 '12 at 14:00

Joel Etherton

37,325
10
89
104

That's how it appears to be operating, but why is the "readyState" property of the window still set to "loading"? (Which is why I logged the readyState outside of the JQuery event.) – scader Jul 12 '12 at 14:03
Actually, looking at it a little closer, I would think that `popup` wouldn't exist within the context you've specified it in. – Joel Etherton Jul 12 '12 at 14:08
Perhaps I complicated my example with JQuery, but even [this demo with JQuery removed](http://jsfiddle.net/NmfBJ/1/) the readyState never changes. – scader Jul 12 '12 at 14:19

Javascript pop-up window document is never "ready"

2 Answers2