web-dev-qa-db-fra.com

Comment modifier dynamiquement le contenu dans une iframe à l'aide de jquery?

Je me demandais s'il est possible d'avoir un site avec une iframe et du code jQuery qui modifie le contenu de l'iframe toutes les 30 secondes. Le contenu est dans différentes pages Web.

Quelque chose comme ça:

<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>
jqueryiframe
88
Audun
<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>
134
Anatoliy

Si vous souhaitez simplement modifier la position de l'iframe et non le contenu réel à l'intérieur de l'iframe, il vous suffira de modifier l'attribut src.

 $("#myiframe").attr("src", "newwebpage.html");
8
Anthony
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
geowa4