Geek Answers Handbook

JavaScript show loading gif when loading iframe

I need to load a GIF to display while the iframe is loading.
Here is what I came up with:

<div id="m-load" style="position:relative;top:45%;left:45%;"> <img src="images/loader.gif"/></div> <iframe src="http://myserver.com/myfile.html" id="m-iframe"></iframe>

And in the iframe source file I entered: (myfile.html)

 <head> <script> top.document.getElementById('m-load').style.display ="none"; </script> </head>

But this will not work in Firefox (permission is prohibited).
Any other way to achieve this?

+3
source share
2 answers

You need to do the same on the page using the onload , which fires after all iframes load like this:

 // show loading image window.onload = function(){ // hide loading image } 
 <img id="img" src="images/loader.gif"/></div> <script> window.onload = function(){ document.getElementById('img').style.display = "none"; } </script>
+6
source

iframes not allowed to simply access parental content perforce. Suppose a hacker has discovered a vulnerability on your page (let's say you have a comment form that allows you to use an iframe for any purpose. If they can just access the parent element, they can go all over the site.

You can use postMessage instead. Since both the page and iframe now agree on how to communicate and what constitutes real communication, you do not have random access to your page. There's a good tutorial at http://robertnyman.com/2010/03/18/postmessage-in-html5-to-send-messages-between-windows-and-iframes/

+1
source

More articles:


All Articles