Change iframe src after x seconds

Discussion in 'Web Design and Development' started by MegaMan1311, Feb 20, 2008.

  1. MegaMan1311 macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #1
    Hello.

    I need a script to change the iframes src every certain amount of seconds. The time between the change is different between each one.

    Example:
    Page Loads
    Google.com is loaded.
    15 seconds later
    Yahoo.com is loaded.
    37 seconds later
    Ask.com is loaded.
    12 seconds later
    Dogpile.com is loaded.
    and so on and so forth.

    I've got the following so far:
    Code:
    document.getElementById('frame').src='http://www.google.com'
    The frame's id is frame. I think that the timer would be loaded, and when it reaches zero show a variant of the above with an if then statement...

    Does this make sense?
    Thanks in advance.
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    This should do the trick (though not tested),

    Code:
    var frames = Array('http://www.google.com/', 15,
        'http://www.yahoo.com/', 37,
        'http://www.ask.com/', 12,
        'http://www.dogpile.com/');
    var i = 0, len = frames.length;
    function ChangeSrc()
    {
      document.getElementById('frame').src = frames[i++];
      if (i >= len) return; // no more changing
      setTimeout('ChangeSrc()', (frames[i++]*1000));
    }
    window.onload = ChangeSrc();
     
  3. MegaMan1311 thread starter macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #3
    Hmm... That didn't work. This is my code:
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    	<head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>Changing Pages... Please Wait</title>
    <script type="text/javascript">
    var frames = Array('http://www.google.com/', 15,
        'http://www.yahoo.com/', 37,
        'http://www.ask.com/', 12,
        'http://www.dogpile.com/');
    var i = 0, len = frames.length;
    function ChangeSrc()
    {
      document.getElementById('frame').src = frames[i++];
      if (i >= len) return; // no more changing
      setTimeout('ChangeSrc()', (frames[i++]*1000));
    }
    window.onload = ChangeSrc();
    </script>
    </head>
    	<body>
    	<iframe src="" name="frame" id="frame" width="100%" height="100%"></iframe>
    	</body>
    </html>
    
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Small typo on my part. Last line of code should be,
    Code:
    window.onload = ChangeSrc;
    The parentheses were throwing it off.
     
  5. MegaMan1311 thread starter macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #5
    Thanks that worked. Just one question though. How would you get it to loop after the last site?
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    Well depends where you're looping to. Do you want to start over from the beginning after a certain time, or just adding more sites? To loop back to the beginning,

    Code:
    var frames = Array('http://www.google.com/', 15,
        'http://www.yahoo.com/', 37,
        'http://www.ask.com/', 12,
        'http://www.dogpile.com/', 14);
    var i = 0, len = frames.length;
    function ChangeSrc()
    {
      if (i >= len) { i = 0; } // start over
      document.getElementById('frame').src = frames[i++];
      setTimeout('ChangeSrc()', (frames[i++]*1000));
    }
    window.onload = ChangeSrc;
     
  7. cicciotargatona macrumors newbie

    Joined:
    Jun 5, 2014
    #7
    mouseover stop iframe

    Hi, thanks for your help!
    Do you know how i can creat a function pause of the iframe when the mouse is over? and mouseout the iframes continue...
     

Share This Page