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?

Answer 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).