lional Posted October 5, 2012 Share Posted October 5, 2012 Hi I have 5 iframes on a single page and I want them to refresh every 5 seconds. This is my code. Only the first iframe refreshes <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Untitled 1</title> <link rel="stylesheet" type="text/css" href="css/laf.css" /> <script type="text/javascript"><!-- // set your interval in milliseconds var reloadInterval = 5000; // this will run when the document is fully loaded function init() { setTimeout('reload()',reloadInterval); } // this reloads the iframe, and triggers the next reload interval function reload() { var iframe = document.getElementById('reloader','reloader_one','reloader_two','reloader_three','reloader_four'); if (!iframe) return false; iframe.src = iframe.src; setTimeout('reload()',reloadInterval); } // load the init() function when the page is fully loaded window.onload = init; --></script> </head> <body> <div id="main_container"> <div id="logo_bg"> <div id="logo"></div></div> <div id="body_container"> <div id="five_green_bg"> <div id="five_bg"><div id="five_one"><iframe src="banner.php" width="176" height="128" scrolling="no" id="reloader" style="border:0px;padding:0px;margin: 0px 0px 0px 0px;border: 0px 0px 0px 0px" marginwidth="0" marginheight="0" ></iframe></div> <div id="five_two"><iframe src="banner_two.php" width="176" height="128" scrolling="no" id="reloader_one" style="border:0px;padding:0px;margin: 0px 0px 0px 0px;border: 0px 0px 0px 0px" marginwidth="0" marginheight="0" ></iframe></div> <div id="five_three"><iframe src="banner_three.php" width="176" height="128" scrolling="no" id="reloader_two" style="border:0px;padding:0px;margin: 0px 0px 0px 0px;border: 0px 0px 0px 0px" marginwidth="0" marginheight="0"></iframe></div> <div id="five_four"><iframe src="banner_four.php" width="176" height="128" scrolling="no" id="reloader_three" style="border:0px;padding:0px;margin: 0px 0px 0px 0px;border: 0px 0px 0px 0px" marginwidth="0" marginheight="0" ></iframe></div> <div id="five_five"><iframe src="banner_five.php" width="176" height="128" scrolling="no" id="reloader_four" style="border:0px;padding:0px;margin: 0px 0px 0px 0px;border: 0px 0px 0px 0px" marginwidth="0" marginheight="0" ></iframe></div></div> </div></div> </body> </html> Thanks, any help will be appreciated Quote Link to comment Share on other sites More sharing options...
seanlim Posted October 5, 2012 Share Posted October 5, 2012 As its name suggests, you cannot select multiple elements using getElementById. Replace your javascript with this: <script type="text/javascript"><!-- // set your interval in milliseconds var reloadInterval = 5000; // this will run when the document is fully loaded function init() { setTimeout('reload()',reloadInterval); } // this reloads the iframe, and triggers the next reload interval function reload() { var iframes = document.getElementsByTagName('iframe'); if (!iframes) return false; for(var i=0; i<iframes.length; i++) iframes[i].src = iframes[i].src; setTimeout('reload()',reloadInterval); } // load the init() function when the page is fully loaded window.onload = init; --></script> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.