Display "Please Wait" message in IFRAME while remote page loads?

[John Kotuby]

Hi all,
I am working with a web designer to display a large ASPX page (actually a
1-page multi-function application) in an IFRAME within a regular HTM style
page.
The problem we are trying to deal with is that it takes a few seconds to
load the remote ASPX page as it is fairly large and does some database
queries during it's setup, depending on which "parent" site is calling it.
The page uses tables to position elements and the IFRAME resides in a fixed
position table cell.

Of course I will try to optimize the page, but I suspect there will still be
some noticable delay.

I am trying to come up with a solution that will display a Please Wait
message and an animated gif in the center of the IFRAME when the "parent"
page first loads, and then disappears when the IFRAME target finally fills
the frame.

My first thought is an absolutely positioned DIV that displays approximately
in the center of the IFRAME. Then the comes the question of making it
disappear.

I know of know way that an HTM page can tell when an IFRAME loads...but
maybe there is a client event that fires which I am unaware of.

The other thought is maybe I can Style the DIV with a low Z-order and the
IFRAME with a high Z-Order, but that just may hide the DIV whether the frame
target is loaded or not.

Any help with this will be greatly appreciated...thanks.

 

[bruce barker]

this won't work very well without some tricky client code. your client code
will have to load the iframe, wait for the gif to load and start running,
then request the aspx page. review the google toolkit code to see good
examples of this.

you could switch to an update panel which will allow an animation to display
while loading.


-- bruce (sqlwork.com)

 

[John Kotuby]

OK, I must be suffering from brain freeze today. I added the onload event to
the IFRAME declaration to call the JS function that changes the visibility
style of the "Please Wait" DIV element to hidden.

It seems to be working as long as the user allows "ActiveX Controls" as
prompted by IE7.

I don't understand why the ActiveX warning if I am just using JavaScript. Oh
well...

 

[John Kotuby]

Bruce,
Thanks for the tip on reviewing the Google Toolkit code. I'm sure that will
be helpful.

It appears that your post showed up just 3 minutes before my own reply to
the group, where I explain how I used the client onload event of the IFRAME
to trigger the JS code that makes the absolutely positioned "Waiting" gif
image invisible. Apparently the event fires when the target site completely
finishes loading into the frame, much like the body onload event.

 

[Alhambra Eidos Kiquenet]

Mister, any solution about it ? any sample code please ??

thanks in advance

 

[John Kotuby]

Yes I did find a solution. I haven't been into the newsgroups in a while so
didn't see your question and I don't have email notification turned on. In
effect I created a JavaScript function that handled the onload event of the
IFRAME.

<iframe width="99%" style="z-index:1" height="820px" marginheight="4px"
marginwidth="4px" id="ifSearch" scrolling="no" src=http://example.com
onload="iframe_onload();"> </iframe>

<script type="text/jscript" language="javascript">
function iframe_onload()
{
var theWaitCell = document.getElementById('Wait1');
theWaitCell.style.visibility = "hidden";
}
</script>

What this does is just make the absolutely postioned animated gif become
invisible once the target web page loaded into the IFRAME. Seems to work
just fine.

Here is the code for the absolutely positioned WaitCell.

<div id="Wait1" style="visibility: visible; position: absolute; top: 40%;
left: 40%">
<table id="WaitTable1">
<tr>
<td id="WaitCell1" align="center" valign="middle"
style="background-color: White;
border-width: 4px; border-style: outset; color: #336699;
height: 100px; width: 300px;
font: arial bold 16px">
<img alt="downloading" src="images/download.gif" />
<br />
Search Tool Initializing...
</td>
</tr>
</table>
</div>

Hope this helps...