如何使用jquery动态更改iframe中的内容?

Aud*_*dun 88 iframe jquery

我想知道是否有可能有一个带有iframe的站点和一些每30秒更改iframe内容的jquery代码.内容位于不同的网页中.

像这样的东西:

<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>
Run Code Online (Sandbox Code Playgroud)

Ana*_*liy 134

<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>
Run Code Online (Sandbox Code Playgroud)

  • [++ i%len]作为通过回收迭代数组的方法非常棒!这教会了我一个新的模式!谢谢! (17认同)
  • 请注意,在setInterval函数中,您不需要使用"$(iframe)".但你可以直接"iframe".因为你已经创建了iframe作为jQuery对象上面的几行.干杯. (8认同)

Ant*_*ony 8

如果您只想更改iframe指向的位置而不是iframe中的实际内容,则只需更改src属性即可.

 $("#myiframe").attr("src", "newwebpage.html");
Run Code Online (Sandbox Code Playgroud)

  • load()不是以这种方式使用的jQuery函数.加载是为AJAX (2认同)