<

Progress Indicator while iFrame is Loading

Published on
14,812 Points
8,812 Views
Last Modified:
Approved
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
Comment
Author:apresto
1 Comment
LVL 23

Author Comment

by:apresto
Thanks WaterStreet, and thanks for making those changes too :)
0

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Join & Write a Comment

In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month