<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

Progress Indicator while iFrame is Loading

Published on
15,405 Points
9,405 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
Author:apresto
1 Comment
LVL 23

Author Comment

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

Featured Post

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month