Question

I have a classic ASP page which is loading an ASP.net page through an iframe inside the ASP page. This is working great except for the fact that it takes a while to load the ASP.net page. The user is left here with unfavorable experience because all they say is an empty blank page until the page is finish loading.

What I would like to do is load an initial “loading” ASP.net page so at least the user is shown something and then when the ASP.net page is ready load the correct ASP.net page into the iframe.

Is this possible? I’m thinking perhaps with a bit of javascript but not 100% sure.

Answer 1

There is no “ASP page” once it hits the browser, there is only the resulting HTML.

You have a few problems here:

1) If you put something in the Iframe, it will be over-written as soon as the new page loads. So, you cannot use what’s in the Iframe to display your message.

2) How to tell when the Iframe had loaded

You need to determine the location and size of the Iframe on your page. You need to position an element over it with your message. Modify the style of an absolutely-positioned element to cover the Iframe using JavaScript. Most people would use a framework, such as jQuery, to make it a lot easier.

You then need to detect when the Iframe has loaded and hide this element.

You can use this code to determine that the Iframe has loaded:

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);      
}