...

View Full Version : Wait for iframe to load



dsfargeg
07-30-2008, 03:30 PM
Hey everyone, javascript newbie here. Just started today.
I'm trying to visit urls from an array in an iframe, doesn't seem to work though.
Do I have to fire up "document.get..." somehow for it to work? (onload?)
And how can I "pause" the script until the iframe has loaded?

<html>
<body>
<iframe frameBorder=0 marginHeight=0 marginWidth=0 scrolling=no src="http://www.google.com" width=300 height=300 id=loader/>
<script type="text/javascript">
var i=1;
var urls=['http://www.','mozilla.org', 'opera.com'];
while (i<=2)
{
document.getElementById('loader').src=urls[0]+urls[i];
//Wait for the page to load
}
</script>
</body>
</html>

ninnypants
07-30-2008, 05:59 PM
You should put quotes around your attribute values to avoid any problems there, and you would need to increment your variable so that the page will change. ("i++").

To wait for the page to load you would just make your statement a function and put in an on load on your body tag.


<html>
<body onload="changeSrc();">
<iframe frameBorder="0" marginHeight="0" marginWidth="0" scrolling="no" src="http://www.google.com" width="300" height="300" id="loader"/>
<script type="text/javascript">
var i=1;
var urls=['http://www.','mozilla.org', 'opera.com'];
function changeSrc(){
while (i<=2)
{
document.getElementById('loader').src=urls[0]+urls[i];
i++
//Wait for the page to load
}
}
</script>
</body>
</html>

dsfargeg
07-30-2008, 06:38 PM
You should put quotes around your attribute values to avoid any problems there, and you would need to increment your variable so that the page will change. ("i++").

Agh such an obvious mistake, thanks.


To wait for the page to load you would just make your statement a function and put in an on load on your body tag.

Sorry I guess I put it badly, I need to wait for the sites in the iframes to load. As in; when the javascript changes the iframe to mozilla.org, that it doesn't just fire straight to the next one but instead waits for it to finish loading.

ninnypants
07-30-2008, 07:02 PM
use a set timeout with enough pause time for the page to load before you change pages.


while (i<=2)
{
setTimeout('
document.getElementById('loader').src=urls[0]+urls[i];
i++;', 10000);// time in milliseconds waits ten seconds before loading the page
//Wait for the page to load
}

dsfargeg
07-30-2008, 07:49 PM
use a set timeout with enough pause time for the page to load before you change pages.

So the code would be this, right?


<html>
<body onload="changeSrc();">
<iframe frameBorder="0" marginHeight="0" marginWidth="0" scrolling="no" src="http://www.google.com" width="300" height="300" id="loader"/>
<script type="text/javascript">
var i=1;
var urls=['http://www.','mozilla.org', 'opera.com'];
function changeSrc(){
while (i<=2)
{
setTimeout('
document.getElementById('loader').src=urls[0]+urls[i];
i++;', 10000);// time in milliseconds waits ten seconds before loading the page
//Wait for the page to load
}
}
</script>
</body>
</html>

I tried it with Opera, Epiphany and Firefox but it didn't change the iframe's url for some reason. Must be something missing somewhere.

ninnypants
07-30-2008, 07:55 PM
Try setAttribute :


document.getElementById('loader').setAttribute('src',urls[0]+urls[i]);

dsfargeg
07-30-2008, 08:07 PM
Try setAttribute :


document.getElementById('loader').setAttribute('src',urls[0]+urls[i]);


Still nothing unfortunately.


<html>
<body onload="changeSrc();">
<iframe frameBorder="0" marginHeight="0" marginWidth="0" scrolling="no" src="http://www.google.com" width="300" height="300" id="loader"/>
<script type="text/javascript">
var i=1;
var urls=['http://www.','mozilla.org', 'opera.com'];
function changeSrc(){
while (i<=2)
{
setTimeout('
document.getElementById('loader').setAttribute('src',urls[0]+urls[i]);
i++;', 10000);
}
}
</script>
</body>
</html>

Edit: Could it be that I have to leave the loop for the iframe to load?

ninnypants
07-30-2008, 09:48 PM
I just realized that the code I gave you has some minor errors in the "setTimeout" function. I was putting single quotes inside of single quotes, and that is probably what was causing problems.


setTimeout('
document.getElementById("loader").setAttribute("src",urls[0]+urls[i]);
i++;', 10000);

dsfargeg
07-30-2008, 10:19 PM
I just realized that the code I gave you has some minor errors in the "setTimeout" function. I was putting single quotes inside of single quotes, and that is probably what was causing problems.


setTimeout('
document.getElementById("loader").setAttribute("src",urls[0]+urls[i]);
i++;', 10000);



Still not working but I tried firing it with a button instead, to no avail:


<html>
<body>
<iframe frameBorder="0" marginHeight="0" marginWidth="0" scrolling="no" src="http://www.google.com" width="300" height="300" id="loader"/>
<script type="text/javascript">
var i=1;
var urls=['http://www.','mozilla.org', 'opera.com'];
function changeSrc(){
while (i<=2)
{
setTimeout('
document.getElementById("loader").setAttribute("src",urls[0]+urls[i]);
i++;', 5000);
}
}
</script>
<form>
<input type="button" value="start" onClick=changeSrc()">
</form>
</body>
</html>

ninnypants
07-31-2008, 01:25 AM
Try using these script tags instead of the ones you have:


<script type="text/javascript">
<!-- <![CDATA[

]]> -->
</script>

dsfargeg
07-31-2008, 07:54 AM
Edit: Here's the solution, a friend of mine gave me some help.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#loader{
/*<![CDATA[*/
border:0;
margin:0;
overflow:hidden;
width:300px;
height:300px;
/*]]>*/
}
</style>
<script type="text/javascript">
/*<![CDATA[*/
function changeSrc(i,delay){
var url=[
'google.com',
'altavista.com',
'yahoo.com'
]
i++;
i>=url.length?i=0:null;
var ifr=document.getElementById('loader');
ifr.contentWindow.location.href='http://www.'+url[i];
setTimeout(function(){changeSrc(i,delay)},delay)
}
onload=function(){
var delay=3000;
setTimeout(function(){changeSrc(0,delay)},delay)
}
/*]]>*/
</script>
</head>
<body>
<div>
<iframe src="http://www.google.com" id="loader"></iframe>
</div>
</body>
</html>

Thanks for your effort though ninny.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum