CODEWITHSUNDEEP
javascriptdomiframedom-events
Sorin Buturugeanu
Sorin Buturugeanu

Reputation: 1840

iframe onreadystatechange

I have a HTML page that contains an <iframe>. The <iframe> is being refreshed on certain events (and I can see the contents of the <iframe> being changed, so as far all is ok).

What I want to do is add a onreadystatechange to the <iframe> so that I can display a "loading" text while the contents are being fetched.

I could not add the onreadystatechange in any browser (Safari, Chrome, Firefox). From what I found on the Internet it seems to work in IE, but this is no help for me.

I've tried:

<iframe onreadystatechange="function();">
document.getElementById('frameId').onreadystatechange = function() {};
document.getElementById('frameId').contentDocument.onreadystatechange = function() {};

but nothing seems to work.

Upvotes: 4

Views: 8203

Answers (1)

Jules
Jules

Reputation: 7213

So if you want to show a "The page is loading" message and hide this when the iframe has finished loading you can do something similar to the example below. Note that I used JQuery just to easen up this process. But obviously it can be done in 100% Javascript too.

I also created this on JSFiddle to show you the result. Check it here!!

<html>
<head>
<script type="text/javascript">

function load() {
   //iframe has loaded.
   $('div#loading').delay(1000).slideUp('slow', function() {
        $('div#finished').slideDown('slow').delay('2000').slideUp('slow');
        $('iframe').toggle();
   });
}
</script>
</head>
<body>

     <div id="loading">This page is currently loading.. Just a sec please!</div>
     <div id="finished" style="display: none">Thanks for waiting, enjoy my website now!</div>
     <iframe style="display: none" onload="load()" src="your_url.php"></iframe>

</body>
</html>

Upvotes: 7

Related Questions