Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Wait for iframe to load

    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>

  • #2
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    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.
    Code:
    <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>

  • Users who have thanked ninnypants for this post:

    dsfargeg (07-30-2008)

  • #3
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ninnypants View Post
    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.

    Quote Originally Posted by ninnypants View Post
    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.

  • #4
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    use a set timeout with enough pause time for the page to load before you change pages.
    Code:
    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
         }

  • #5
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ninnypants View Post
    use a set timeout with enough pause time for the page to load before you change pages.
    So the code would be this, right?

    Code:
    <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.

  • #6
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    Try setAttribute :
    Code:
    document.getElementById('loader').setAttribute('src',urls[0]+urls[i]);

  • #7
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ninnypants View Post
    Try setAttribute :
    Code:
    document.getElementById('loader').setAttribute('src',urls[0]+urls[i]);
    Still nothing unfortunately.

    Code:
    <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?
    Last edited by dsfargeg; 07-30-2008 at 09:14 PM.

  • #8
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    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.
    Code:
    setTimeout(' 
              document.getElementById("loader").setAttribute("src",urls[0]+urls[i]);
              i++;', 10000);

  • #9
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ninnypants View Post
    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.
    Code:
    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:

    Code:
    <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>
    Last edited by dsfargeg; 07-30-2008 at 11:54 PM.

  • #10
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    Try using these script tags instead of the ones you have:
    Code:
    <script type="text/javascript">
    <!-- <![CDATA[
    
    ]]> -->
    </script>

  • #11
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Edit: Here's the solution, a friend of mine gave me some help.

    Code:
    <!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.
    Last edited by dsfargeg; 07-31-2008 at 02:04 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •