HighOnCoding.com: Hide Progress Indicator When IFrame is Loaded

Hide Progress Indicator When IFrame is Loaded

AzamSharp
Published Date: 5/14/2009 1:28:02 PM
Views: 6508

Abstract:
Few days ago we dealt with an interesting problem. We were loading HTML files in an IFrame. While the document is being loaded we displayed a progress indicator which notified the user that processing is going on. Everything worked fine until we started loading the PDF documents into the IFrame. When PDF documents were loaded the indicator never vanished when the document was completly loaded. In this article we are going to discuss a solution to this problem.
NOTE:

We were only able to find a solution for the IE browser. If you find a solution for FireFox then please post it in the comments.

Loading Html Documents with Progress Indicator:

Let's first see how to load a simple HTML document through a URL into the IFrame. Here is the IFrame code to load the HTML document.

The above code will simply load the HighOnCoding default page inside the IFrame as shown in the screenshot below:

Don't worry about the size of the IFrame. You can always use the Width and Height attributes of the IFrame to adjust the size. Now, let's see how to add a progress indicator to the page which will notify the user that the document is being loaded.

Adding Progress Indicator:

We are going to use a simple DIV element to create the progress indicator. The DIV will contain some text and a GIF image. Here is the code for the progress indicator DIV:

The screenshot of the progress indicator is shown below:

(We know the progress indicator is not pretty enough for you!)

The progress indicator uses the "progressIndicatorStyle" class which is shown below:

When the page loads the indicator is enabled by default. We can hook up the onload event of the IFrame to close the indicator once it is loaded.

The closeProgressIndicator function uses JQuery hide() function to make the progressIndicator invisible. Here is the animation of the effect:

This works fine for the HTML documents but let's try to load a PDF into the IFrame.

And here is the screenshot showing that even though the PDF document is successfully loaded the progressIndicator is never removed from the page. This is because the load event of the IFrame is never fired.

This is an interesting problem since the IFrame only seems to be chocking on the PDF documents. Let's see how we can solve this problem.

Polling IFrame for Completion:

Our solution is based on the IFrame.document.readyState property. We will poll on the status of the property and when the status is "complete" we will hide the progress indicator. For polling we will use the window.setInterval method. Check out the implimentation of the closeProgressIndicator function shown below:

The setInterval method is fired as soon as the page is loaded. Here is the complete JavaScript code for the application.

The closeProgressIndicator function is fired every 1 second (1000 milliseconds) and checks the status of the iframe.document.readyState. If the readyState is "complete" then it simply hides the progressIndicator and clears the interval.

Unfortunately, this only works for IE. On FireFox you will get an exception since FireFox does not recognize iframe.document property. Currently, we are not aware of any solution to this issue for the FireFox browser. If you have any soluton then please post it in the comments section.

References:

1) Lots of Ajax Indicators
2) AjaxLoad (A website to download indicators)

Conclusion:

In this article we learned how to load different documents into the IFrame. The article focuses on the problem caused by loading PDF documents. The solution mentioned in this article only works with the IE browser. In the future articles we will try to find a generic solution.

Comments/Feedbacks


	Subject: error Name: rene Date: 10/15/2009 9:12:34 AM Comment: setIntervalId deberia ser global


	Subject: All browser solution Name: Jeremy Date: 11/28/2009 12:17:07 AM Comment: Solution for all browsers: (function($) { $.fn.src = function(url, onLoad, options) { var timer, iframe = $(this), defaults = { timeout: 0, onTimeout: null, onDOMReady: null, }, startTime, timer, duration; opts = $.extend(defaults, options); startTime = +new Date; if (opts.timeout) { timer = setTimeout(function() { iframe.load(null); if (opts.onTimeout) opts.onTimeout(iframe, opts.timeout); }, opts.timeout); } if (opts.onDOMReady) { iframe.ready(function() { duration = (+new Date - startTime); opts.onDOMReady(iframe, duration); }); } var onloadHandler = function() { duration = +new Date - startTime; if (timer) clearTimeout(timer); if (onLoad) onLoad(iframe, duration); } iframe.bind('load', onloadHandler); iframe.attr("src", url); opts.completeReadyStateChanges=0; return iframe; } })(jQuery);


	Subject: hello Name: apps Date: 1/19/2010 12:47:24 PM Comment: how we can hide some div from different domain in iframe


	Subject: Re: All browser solution Name: Matt Date: 4/21/2010 6:25:38 AM Comment: To Jeremy: Can you give an example how to use your "all browser" solution, please?