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

我想知道是否可能有一个包含iframe和一些jquery代码的网站，该代码每30秒更改一次iframe内容。内容在不同的网页中。

像这样：

<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>

jquery iframe

— 奥敦
source

帖子的底部没有显示，但是它是带有iframe的基本html。

— Audun

@Audun：我为您修复了它；下次，突出显示所有内容并使用代码按钮。另外，间隔很酷。

— geowa4，2009年

诸如此类的东西都http://webPage1.com需要用引号引起来！//将发表评论！

— geowa4，2009年

Answers:

135

<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>

— 解剖学
source

[++ i％len]作为一种循环遍历数组的方法非常出色！那教会了我一个新的模式！谢谢！

— 2010年

请注意，在setInterval函数内部，您不需要使用“ $（iframe）”。但是您可以直接“ iframe”。因为您已经在上面几行中将iframe创建为jQuery对象。干杯。

— 马里奥·阿瓦德

间隔设置如何动态更改？

— Yohanes AI

请改用setTimeout

— Anatoliy

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

 $("#myiframe").attr("src", "newwebpage.html");

— 安东尼
source

load（）不是以此方式使用的jQuery函数。AJAX的负载量

— Hurda 2010年

加载不适用于Ajax，请@Hurda参阅文档（api.jquery.com/load-event）。您会看到，即使在加载完成后，也使用Load来钩住a。您可以对图像使用加载。但是，我必须同意你的看法，即在安东尼提供的情况下也不适当。

— Patrick Desjardins

@Doak-我仍然认为他提到api.jquery.com/load ajax加载-它加载了一些内容。实际方法是根据参数选择的-因此我们无法确定。我很好奇，为什么11个月后您觉得需要纠正我？

— 2011年

好吧，我敢肯定你们两个之间都是对的。自从接触jquery以来已经很久了，我不记得加载了什么。我敢肯定，当我25个月前写下答案时，给人的印象是load()可以用来重新加载任何窗口或文档对象。就像我说的，我已经不记得它的实际用途了。我认为总的来说，我正在尝试提出一个简单的选项，不需要协商同源策略。

— 安东尼

实际上，我认为假设我要使用的方法是非常荒谬的Hurda，因为他们两个都无法真正实现我所建议的方法。为什么我认为用于ajax的方法将重新加载iframe的次数多于我认为用于事件绑定的方法将重新加载iframe的次数？如果有的话，我可能在考虑纯js，以及您使用“ onblah”进行绑定并使用“ blah”触发事件的方式。无论哪种方式，该方法都不会重新加载iframe，因此我编辑了答案。

— 安东尼

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;
}

— geowa4
source