Best IT Recipes

How to dynamically change content in iframe using jquery?

I was wondering if it is possible to have a site with an iframe and some jquery code that changes the contents of the iframe every 30 seconds. Content is located on different web pages.

Something like that:

<html> <head> <script type="text/javascript" src="jquery.js"></script> <script> $(document).ready(function(){ var array = new array(); array[0] = 'http://webPage1.com'; array[1] = 'http://webPage2.com'; // And so on. // Do something here to change the iframe every 30 second }); </script> </head> <body> <iframe id="frame"></iframe> </body> </html>
+85
jquery iframe
Oct 12 '09 at 12:48
source share
3 answers
 <html> <head> <script type="text/javascript" src="jquery.js"></script> <script> $(document).ready(function(){ var locations = ["http://webPage1.com", "http://webPage2.com"]; var len = locations.length; var iframe = $('#frame'); var i = 0; setInterval(function () { iframe.attr('src', locations[++i % len]); }, 30000); }); </script> </head> <body> <iframe id="frame"></iframe> </body> </html>
+128
Oct 12 '09 at 13:01
source share

If you just want to change the place where the iframe points, and not the actual contents inside the iframe, you just need to change the src attribute.

  $("#myiframe").attr("src", "newwebpage.html");
+7
Oct 12 '09 at 12:52
source share
 var handle = setInterval(changeIframe, 30000); var sites = ["google.com", "yahoo.com"]; var index = 0; function changeIframe() { $('#frame')[0].src = sites[index++]; index = index >= sites.length ? 0 : index; }
+4
Oct 12 '09 at 12:55
source share


More articles:


All Articles