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?

Am creating an ifram. var businessDownl= document.createElement(""iframe""); — Cyril, May 22 '13 at 10:27
why do you need `""CheckState()""` ? two sets of opening and closing quotes ? — Harsha Venkataramu, May 22 '13 at 10:27
is the source of the this iFrame on the same domain as your webpage ? — gkalpak, May 22 '13 at 10:28
@harsha. Actually I Copied the Javascript from vb. So pls Ignore that. The code works fine in IE. It strucks only when it is checking the document.readyState — Cyril, May 22 '13 at 10:28
@Cyril : Did you check the chrome debugger or the firebug console ? — Harsha Venkataramu, May 22 '13 at 10:30
Yes. I am using console.log for printing the $get('businessDownl').document.readyState. It is throwing an exception. When I googled , they are saying document.readyState is not supported — Cyril, May 22 '13 at 10:33

score 6 · Accepted Answer · edited May 23 '17 at 11:52

6

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

edited May 23 '17 at 11:52

Community

1
1

answered May 22 '13 at 11:04

gkalpak

47,844
8
105
118

In order for this to work you have to have access to the domain in the iframe – Oskar Mar 24 '15 at 14:16
1

@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 ! – gkalpak Mar 24 '15 at 14:44
4

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. – awilkinson Jun 18 '15 at 20:33

Rob Johnstone · Answer 2 · 2013-05-22T10:41:56.410

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
});

document.readyState not working in Firefox and Chrome

2 Answers2

Linked