Home/ Questions/Q 6157387
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T20:46:36+00:00

I have a HTML page that contains an <iframe> . The <iframe> is being

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0