document.readyState not working in Firefox and Chrome

Question

In my application, I am calling a method for every 1000ms to check the document readyState. Following is the code which I am using:

var success=setInterval(""CheckState()"",1000);

function CheckState(){

if($get('businessDownl').document.readyState=="interactive" || 
      $get('businessDownl').document.readyState=="complete"){
           alert("Great");
           clearInterval(success);
  } 
}

This code works fine in IE browser, but fails in Firefox and Chrome browsers. I tried using $get('businessDownl').readyState also, it is printing as undefined. Can anybody tell me how to use the readyState for Firefox and Chrome in the above scenario?

Solution 1

NOTE: In order to be able to access the document of an iframe and thus it's readyState, you need to have access to the domain in the iframe (regadless of the use of jQuery).
For more info, take a look here.

---

You could do it using the iframe's contentWindow property (no jQuery required).
Note that, in order to access the iframe's document, you have to add the element to the DOM first (e.g. using window.document.appendChild()).

Sample code:

var businessDownl = document.createElement('iframe');
document.body.appendChild(businessDownl);
...
var state = businessDownl.contentWindow.document.readyState;

See, also, this short demo.
[Tested on latest versions of Firefox and Chrome.]

(Notice that, because the iframe loads quickly, sometimes you see only "completed", sometimes "loading" and "completed" - once I was even lucky enough to see "uninitialized" too :D).

Solution 2

If you just want to wait until the document is ready there is no need to keep checking - you can listen for the event:

var whenReady = function(callback) {
  if (document.readyState === 'complete') callback(); // check not already loaded prior to this function being called
  else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback); // for standards compliant browsers (including IE 9+)
  else if (document.attachEvent) document.attachEvent('onreadystatechange', callback); // for IE 8
};

whenReady(alert('loaded'));

The only downside of this technique is that it only supports IE 8 and later. Libraries such as JQuery offer better legacy browser support and a cleaner syntax:

$(function() {
  // anything here will execute once the dom is ready
});

Comments

[Oskar]

In order for this to work you have to have access to the domain in the iframe

[gkalpak]

@Krets: True, but this was not an issue for the OP. (The question was pretty specific, so the answer is not likely to apply to a broad set of cases.) Adding a little "heads-up", though, won't hurt, so good point. Thx !

[awilkinson]

This doesn't work for me. It takes about 10 seconds before the browser prompts me to download the file the iframe downloading. But the iframe.contentWindow.document.readyState is "complete" immediately for IE, Chrome, or Firefox.