Tip Details Add a Related Tip

Rate as: Positive Negative

Telling when an iframe is done loading

When using <iframes> is it often useful to know when the contents of the frame is done loading. There are two ways to do this.

The first way, which is by far the simplest is to add an onLoad event to the <iframe>. Something like this:

<iframe id="testIframe" src="somepage" onload="functionToCallAfterLoading();"></iframe>

For an iframe like this, functionToCallAfterLoading will call every time the content of the iframe is loaded. This includes loads that occur after the initial page load. The only problem with this technique is that some older browsers don't support it. If you are not supporting older browsers (IE5, early Opera, etc), don't worry about it.

If you need to support older browsers, you can get a handle to the iframe element and check the state of document.readyState, once this reaches complete, the iframe has completed loading. Of course, this downside to this is that you need to keep checking. One way to do this is to schedule a proc to run every 100 milliseconds or so. If it finds that it is done, it calls the function you want called when the iframe is loaded, if not it calls itself again on a delay. Here's an example of such a function:

function checkIframeLoading() {
   // Get a handle to the iframe element
   var iframe = document.getElementById('testIframe');

   // Check if loading is complete
   if ( iframe.document.readyState == 'complete' ) {
      // The loading is complete, call the function we want executed once the iframe is loaded
      functionToCallAfterLoading();
      return;
   }

   // If we are here, it is not loaded. Set things up so we check   the status again in 100 milliseconds
   window.setTimeout('checkIframeLoading();', 100);      
}

Using either of these methods will allow you to know, and take an action, when an <iframe> element has completed loading. The first method is by far the easier of the two, but it is not supported by very old browsers.
Rating: 85% positive, 7 total Votes
Categories: web javascript HTML programming
Added: on Apr 18, 2008 at 8:05 am
Added By: an anonymous user
Searches: iframe loading web html browser

Comments on this Tip

Add a Comment
I wanted to let you know that this is a great solution. Thanks for posting.
– Added by an anonymous user on Sep 07, 2008 at 10:57 pm
It does not work in FF
– Added by an anonymous user on Jan 22, 2009 at 1:48 am
It should not since this is a WebKit-only function (Apple Safari uses WebKit) -- use this code for all browsers -- http://www.kryogenix.org/days/2007/09/26/shortloaded
– Added by an anonymous user on May 16, 2009 at 7:48 am
Your Comment:
(how to format)
Rate This Tip:

Verify Humanity:
Sorry, we know it's annoying, but please enter the characters shown in the image to the left so that we know you're an actual person and not an evil spammer. Thanks.
       

Related Tips

Scrolling HTML elements using the keyboard

80% positive, 1 comment - last added on Jul 18, 2008 at 3:53 pm
– Tip added by rlansky on Jun 22, 2007 at 9:34 am

Static variables in Javascript

93% positive, 28 comments - last added on Nov 12, 2009 at 12:21 pm
– Tip added by an anonymous user on Aug 03, 2007 at 4:19 pm

Detecting if a variable exists in Javascript

100% positive, 2 comments - last added on Oct 21, 2009 at 2:29 pm
– Tip added by an anonymous user on Jul 22, 2008 at 8:31 am

Length of associative arrays in Javascript

100% positive, 0 comments
– Tip added by an anonymous user on Nov 04, 2008 at 10:13 am

Don't use onChange events for checkboxes

Categories: HTML DOM javascript web
100% positive, 0 comments
– Tip added by an anonymous user on Oct 01, 2007 at 4:01 pm

Efficient building of large strings in Javascript

100% positive, 0 comments
– Tip added by an anonymous user on Aug 08, 2007 at 12:52 pm

reading select element values in javascript in IE7

100% positive, 0 comments
– Tip added by an anonymous user on Jul 17, 2009 at 1:28 pm

Optional parameters in javascript functions

100% positive, 0 comments
– Tip added by an anonymous user on Jul 30, 2008 at 10:44 am

Javascript variable naming

100% positive, 1 comment - last added on Jul 22, 2008 at 8:33 am
– Tip added by an anonymous user on Sep 30, 2007 at 7:28 am

Getting pages to render correctly in IE8

Categories: IE8 web css javascript HTML
100% positive, 0 comments
– Tip added by an anonymous user on Jul 23, 2009 at 10:13 pm

Checking for undefined variables in Javascript

100% positive, 1 comment - last added on Jul 14, 2009 at 5:13 pm
– Tip added by an anonymous user on Jan 14, 2009 at 9:47 am

compressing javascript

100% positive, 0 comments
– Tip added by an anonymous user on Jun 12, 2008 at 3:02 pm

Code for creating Javascript CSS charts

100% positive, 0 comments
– Tip added by an anonymous user on Aug 21, 2007 at 12:23 pm

Creating vector graphics in javascript

100% positive, 0 comments
– Tip added by Marcos84 on May 10, 2007 at 2:44 pm

attaching events to nodes in Javascript

no ratings, 0 comments
– Tip added by an anonymous user on Aug 18, 2008 at 11:23 am

animating elements with jQuery

0% positive, 0 comments
– Tip added by an anonymous user on Aug 04, 2008 at 1:46 pm

Avoid invalid title names when opening javascript windows

no ratings, 0 comments
– Tip added by an anonymous user on Aug 07, 2007 at 9:36 am

Nice article on javascript techniques

no ratings, 0 comments
– Tip added by rlansky on Apr 24, 2007 at 8:12 am

Getting answers from Experts Exchange

Categories: programming web
100% positive, 0 comments
– Tip added by an anonymous user on Apr 14, 2009 at 10:57 am

How to impress the judges of 2009 Calling All Innovators Contest

no ratings, 0 comments
– Tip added by alvinmood on Jun 12, 2009 at 6:05 am