Unable to replace onreadystate to load

Question

I was hiding the download icon when my file finished loading in the iframe . It worked great in Internet Explorer. In Chrome, I was not able to wait for the file to load in the iframe .

Any help is appreciated.

 function checkIframeLoaded() { var iFrameObject = document.getElementById("iframehidden"); var iframeDoc = iFrameObject.contentDocument || iFrameObject.contentWindow.document; if (iframeDoc.readyState == 'complete' || iframeDoc.readyState == "interactive" || iframeDoc.readyState == "loaded") { if (top.document.getElementById("tblPleaseWait") != null) { top.document.getElementById("tblPleaseWait").style.display = "none"; } else if (document.getElementById("tblPleaseWait") != null) { document.getElementById("tblPleaseWait").style.display = "none"; } return; } } function setupLoader(objIFrame, brestorepane) { if (objIFrame.attachEvent) { if (brestorepane) { objIFrame.attachEvent('onreadystatechange', checkIframeLoaded); } } else { if (brestorepane) { objIFrame.addEventListener('load', checkIframeLoaded()); } } } 

Answer 1

You incorrectly configure the handler in browsers other than IE.

Firstly, there is a typo. addEventListner must be addEventListener . Perhaps this is your JavaScript console.

After that, you call checkIframeLoaded() immediately, rather than referring to it as a handler.

Try:

 objIFrame.addEventListener('load', checkIframeLoaded); 

Answer 2

If iframe src points to content on your own site and you set allow-same-origin correctly, you can use this method (you marked the question with jQuery, so this solution uses jQuery, but an alternative to pure JS is possible as a)

 function checkIframeLoaded() { if (top.document.getElementById("tblPleaseWait") != null) { top.document.getElementById("tblPleaseWait").style.display = "none"; } else if (document.getElementById("tblPleaseWait") != null) { document.getElementById("tblPleaseWait").style.display = "none"; } } $("#iframehidden").on("load", checkIframeLoaded); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='tblPleaseWait'>PLEASE WAIT</div> <iframe id='iframehidden' name='iframehidden' src='http://stacksnippets.net' style='border:2px solid #ccc;'></iframe> 

Another way to do this is to put the code in the iframe document itself (e.g. iframe.html ):

 $(window).on("load", function() { var plsWait = top.document.getElementById("tblPleaseWait"); if(plsWait) plsWait.style.display = "none"; }); 

If iframe src is on a different site, then you have a problem. If the remote content is not configured for cross-site scripting.

Also, as Paul Rub pointed out, here you are mistaken:

objIFrame.addEventListener('load', checkIframeLoaded());

You do not actually delegate the checkIframeLoaded function to the checkIframeLoaded event; you execute this function with a bracket () and instead delegate its result, which is undefined .

Just remove the brackets to achieve the desired effect, namely: checkIframeLoaded is called when the load event is fired:

objIFrame.addEventListener('load', checkIframeLoaded);

After that, you just need to work with scripting restrictions between frames.

Answer 3

 function checkIframeLoaded() { if (top.document.getElementById("tblPleaseWait") != null) { top.document.getElementById("tblPleaseWait").style.display = "none"; } else if (document.getElementById("tblPleaseWait") != null) { document.getElementById("tblPleaseWait").style.display = "none"; } } $("#iframehidden").on("load", checkIframeLoaded); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='tblPleaseWait'>PLEASE WAIT</div> <iframe id='iframehidden' name='iframehidden' src='http://stacksnippets.net' style='border:2px solid #ccc;'></iframe>