Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple.
The most important thing to remember when implementing this is the order in which requests are processed and rendered on a web page. Server-side code is always processed first, a response is then sent down to the client and presented on the browser in this case. So the following code:
Response.write "<p>Hello World 1</p>"
<p>Hello World 2</p>
Response.write "<p>Hello World 3</p>"
Would indeed render as follows:
Hello World 1
Hello World 2
Hello World 3
The first thing to note is that the ASP code was processed first, and was then rendered as HTML. The same principles apply when attempting to hide/show a progress indicator for an iFrame.
Here is a working example. Copy the following code and paste it into "parent.html":
document.getElementById("dvLoading").style.display = "";
<div id="dvLoading" style="position:absolute;display:none;margin-left:auto;margin-right:auto;width:200px;height:200px;border:1px solid#000;background-color:#eee;">
<iframe src="iframepage.html"width="500" height="500"frameborder="1"></iframe>
And take the following code and paste it into"iframepage.html":
alert("Closing the waiting div");
This is the page within the iframe.
//I have used setTimeout so that the LaodingDiv staysopen for 3 seconds
//Usually just use the line commented out below it:
Now run "parent.html". You will see that after 3 seconds the "Loading" div disappears.
**SOME THINGS TO BE AWARE OF**
1. This method will work fine if both Parent and Child are on the same domain. If the Child exists within a sub-domain of the domain of the Parent, i.e
(Parent)parent.html > www.web.com
(Child)iframepage.html > my.web.com
You must set the domain property on the Child so that it can communicate with its Parent:
//This script can go in the <head>section of the Child page
document.domain = "web.com"
2. Both Parent and Child need to communicate through the same transfer protocol, so both need to be http, or both need to be https. You cant mix and match(as far as I am aware).
3. If the parent is on a different domain to the page within the iframe, i.e
The Child will be unable to access any elements on the parent; in this case, the "Loading" div on the Parent page. There are ways around this issue, but this is a discussion for another article.
I hope this short article will be of some use to someone, somewhere, someday :)