PDA

View Full Version : Changing iframe src property



brendon99
Nov 23rd, 2003, 01:19 AM
Hi,

Through JS, I'm changing the src of an iframe. However, I want it to go through two changes in the same script, but the first page doesn't show to the user at all.

ie.
document.getElementById("myiframe").src ="pause.htm"
document.getElementById("myiframe").src="outlet.htm"

Is there an event or property I can check on the iframe to wait until the first page is complete before processing the next?

thanks

adios
Nov 23rd, 2003, 03:46 AM
Try putting this in "pause.htm":

<body onload="self.location='outlet.htm'">

brendon99
Nov 23rd, 2003, 11:07 PM
Hi Adios,

gave it a try, but unfortunately my pause.htm still didn't show up -its still skipping it.

adios
Nov 23rd, 2003, 11:15 PM
Did you eliminate this as well?

document.getElementById("myiframe").src ="pause.htm"
document.getElementById("myiframe").src="outlet.htm"

brendon99
Nov 25th, 2003, 12:39 AM
sorry for the late reply....

I eliminated that line from my original page as well - still no change.

If I remove the onload call from "pause.htm" then I get the contents of "pause.htm" showing up, so it is making the call correctly.

My whole purpose in doing this is so that the user has something visual happening whilst the iframe page is loading/rendering. Is there perhaps some other method that I should use instead?

thanks

adios
Nov 25th, 2003, 04:31 AM
You'll need to explain this better. Is this a 'loading...please wait...' type of thing? If so, you're better off using a locally generated page (instant display) as the 'pause.htm' and simply let 'outlet.htm' replace it.

brendon99
Nov 25th, 2003, 05:04 AM
sorry, I'll try to explain better....

I have a page with a button and an iframe in it. When I click the button, it changes the iframe to a different page. However, the different page takes two-three seconds to load/render; therefore when you click the button, it looks like nothing is happening, then bang! 3 seconds later the iframe changes.

Knowing my users, they'll be clicking on everything, thinking its not working.

In IE, you get a wait symbol appearing, but I'm using an .HTA application, and you don't get the wait symbol appearing. I don't really mind what sort of visual aid I give to the user, be it a waiting cursor, or a page loading - whatever is possible.

What do you mean by a locally generated page?

adios
Nov 25th, 2003, 05:49 AM
Simple example...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<style type="text/css">

iframe {
width: 400px;
height: 200px;
margin: auto;
overflow: hidden;
border-width: 0;
}
a:link, a:visited {
font: bold 64px monospace;
text-decoration: none;
}


</style>
<script type="text/javascript" language="javascript">

function original_page()
{
var sHTML = '<body style="font:bold 20px arial;color:#000;background:#fff;">';
sHTML += '....original page.....</body>';
return sHTML;
}

function load_page()
{
var sHTML = '<body style="font:bold 20px arial;color:#933;text-align:center;background:#eee;">';
sHTML += '<br /><br /><br />Please wait....loading new page.....</body>';
return sHTML;
}

function changeIFsrc(url) {
document.getElementById('foo').src = 'javascript&#58;parent.load_page()';
setTimeout('document.getElementById("foo").src="'+url+'"',50);
return false;
}

</script>
</head>
<body>
<iframe id="foo" name="foo" src="javascript&#58;parent.original_page()"></iframe>
<p>
<a href="http://academ.hvcc.edu/~kantopet/css/index.php" target="foo" onclick="return changeIFsrc(this.href)">&amp;raquo;</a>
next
</p>
</body>
</html>

You can make the 'wait' page as elaborate as you want (since it's an HTA, the sky's the limit). Could also use an animated gif, suitably preloaded.

'Locally generated' means constructed by JS, on-site, with no download latency (wait).

brendon99
Nov 26th, 2003, 01:00 AM
hmmm... I see...

I knew about the SetTimeout function, but didn't realise it could be used in such a way - it works well.....


thanks again adios....