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: 100% positive, 1 Vote
Categories: web javascript HTML programming
Added: on Apr 18, 2008 at 8:05 am
Added By: an anonymous user

Comments on this Tip

Add a Comment
There are no comments for this tip
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

100% positive, 1 comment - last added 5 days, 12 hours ago
– Tip added by rlansky on Jun 22, 2007 at 9:34 am

Static variables in Javascript

100% positive, 2 comments - last added on May 08, 2008 at 4:19 pm
– Tip added by an anonymous user on Aug 03, 2007 at 4:19 pm

Detecting if a variable exists in Javascript

100% positive, 0 comments
– Tip added by an anonymous user 1 day, 20 hours ago

compressing javascript

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

Javascript variable naming

100% positive, 1 comment - last added 1 day, 20 hours ago
– Tip added by an anonymous user on Sep 30, 2007 at 7:28 am

Creating vector graphics in javascript

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

Don't use onChange events for checkboxes

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

Code for creating Javascript CSS charts

no ratings, 0 comments
– Tip added by an anonymous user on Aug 21, 2007 at 12:23 pm

Efficient building of large strings in Javascript

no ratings, 0 comments
– Tip added by an anonymous user on Aug 08, 2007 at 12:52 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

Enabling right click on web pages

Categories: javascript web security
100% positive, 0 comments
– Tip added by an anonymous user 4 days, 21 hours ago

Something to consider before switching platforms

100% positive, 0 comments
– Tip added by an anonymous user on Sep 25, 2007 at 7:31 pm

Trimming whitespace in Javascript

Categories: javascript programming
100% positive, 0 comments
– Tip added by an anonymous user on Sep 13, 2007 at 1:54 pm

Using optional parameter in javascript

Categories: javascript programming
100% positive, 0 comments
– Tip added by an anonymous user 6 days, 20 hours ago

Redirecting in PHP

100% positive, 0 comments
– Tip added by an anonymous user 6 days, 21 hours ago

Javascript Error: unterminated regular expression literal

100% positive, 0 comments
– Tip added by marty on Jun 26, 2008 at 1:20 pm

Copyright date on sites

Categories: web programming php Smarty
100% positive, 0 comments
– Tip added by an anonymous user on Mar 11, 2008 at 8:14 am

Wrap web text to any shape

100% positive, 0 comments
– Tip added by an anonymous user on Dec 16, 2007 at 10:35 am

Javascript: How to Create a Random Number

0% positive, 0 comments
– Tip added by Walkere on Feb 23, 2008 at 9:49 pm