Progress Indicator while iFrame is Loading

Published:
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.

Ok. Let's move on to an example. We have "parent.html" (will be referred to as the Parent Page) which is the page containing the iframe. And, we have "iframepage.html" (will be referred to as the Child Page) which is the page being loaded by the iframe. My proposed solution is to have your "Loading" div on the Parent, have it show by setting the style.display in the onload event of the body tag, or just simply show by default. And, at the very end of the Child page, you want to have some JavaScript which will hide this div. The reason you want the JavaScript at the end of this page is because, as mentioned above, client-side code is executed last, so all of the processing on this page is going to be done first, which will keep the "Loading" div on the parent open/visible for that time, and the last thing that will happen is your "Loading" div will be hidden on the Parent.

Here is a working example. Copy the following code and paste it into "parent.html":
 
<html>
                      
                      <head>
                          <script language="javascript">
                          function ShowLoadingDiv()
                          {
                             document.getElementById("dvLoading").style.display = "";
                          }
                          </script>
                      </head>
                      
                      <body onload="ShowLoadingDiv();">
                      
                      <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;">
                          Please wait....
                      </div>
                      
                      <iframe src="iframepage.html"width="500" height="500"frameborder="1"></iframe>
                      
                      </body>
                      
                      </html>

Open in new window


And take the following code and paste it into"iframepage.html":
<html> 
                      
                      <head>
                          <script language="javascript">
                          function HideLoadingDiv()
                          {
                              alert("Closing the waiting div");
                              parent.document.getElementById("dvLoading").style.display ="none";
                          }
                          </script>
                      </head>
                      
                      <body>
                      
                      <p>
                          This is the page within the iframe.
                      </p>
                      
                      <script language="javascript">
                          //I have used setTimeout so that the LaodingDiv staysopen for 3 seconds
                          //Usually just use the line commented out below it:
                          setTimeout("HideLoadingDiv()", 3000);
                          //HideLoadingDiv();
                      </script>
                      
                      </body>
                      
                      </html>

Open in new window


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:

<script language="javascript">
    //This script can go in the <head>section of the Child page
    document.domain = "web.com"
</script>

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

(Parent)parent.html > www.web.com
(Child)iframepage.html > www.cloud.com
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 :)

Happy coding

Piet
parent.txt
iframepage.txt
0
12,040 Views

Comments (1)

Author

Commented:
Thanks WaterStreet, and thanks for making those changes too :)

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.