Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Loading indicator stays in Firefox after iframe finished loading

I have an iframe placed in my page's body like this:

<iframe src="about:blank" onload="this.contentWindow.document.write('some text')">

It works well enough, the onload event replaces iframe's content with "some text" and thats it.

BUT in Firefox it causes the spinning wheel "loading indicator" which shows you that the page is being loaded to never go away. There is only text being inserted into the iframe, so there is no other content hanging around, waiting to be loaded. When I remove the iframe from the page it removes the problem, so I know, it is the said iframe which is causing it.

It works correctly in IE and Chrome.

Now, I can do something like this:

 <iframe src="about:blank" onload="this.contentWindow.document.write('some text'); t.contentWindow.stop();">

Which fixes the problem in Firefox, but it prevents any images in the iframe from loading (i don't use any in the example insert text, but they will be added later on).

So, how do i go about fixing this?

like image 887
user2079305 Avatar asked Aug 21 '13 09:08

user2079305


2 Answers

Make sure you call this.contentWindow.document.close(); after writing to the iframe.

like image 182
EricP Avatar answered Oct 13 '22 00:10

EricP


Why are you triggering the write to the contentWindow by using the load event of the same iframe in the first place?

An alternate approach just creates an iframe and loads some content with images into it - works on firefox as expected. No big deal.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function createIframe(){
    var f = document.getElementsByTagName('body') [0].appendChild(document.createElement('iframe'));
    f.contentWindow.document.write('<img src="http://www.funimage.org/uploads/posts/2013-02/1361892989_1_14.jpg" />');
}
</script>
</head>
<body onload="createIframe()">

</body>
</html>
like image 40
jhohlfeld Avatar answered Oct 13 '22 02:10

jhohlfeld