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 Link to comment https://forums.phpfreaks.com/topic/269109-refreshing-multiple-iframes-on-a-single-page/ 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> Link to comment https://forums.phpfreaks.com/topic/269109-refreshing-multiple-iframes-on-a-single-page/#findComment-1382849 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.