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

【问题标题】：How do I dynamically change the content in an iframe using jquery?如何使用 jquery 动态更改 iframe 中的内容？
【发布时间】：2010-12-05 23:30:27
【问题描述】：

我想知道是否有可能拥有一个带有 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>

【问题讨论】：

帖子底部没有显示，但它是带有 iframe 的基本 html。
@Audun：我为你修好了；下次，突出显示所有内容并使用代码按钮。此外，间距很酷。
http://webPage1.com 之类的东西需要用引号引起来！ // 会发表评论！

标签： jquery iframe

【解决方案1】：

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

【讨论】：

[++i % len] 作为一种通过回收循环遍历数组的方法非常棒！这教会了我一个新模式！谢谢！
请注意，在 setInterval 函数中，您不需要使用“$(iframe)”。而是您可以直接“iframe”。因为您已经在上面几行创建了 iframe 作为 jQuery 对象。干杯。
如果设置的时间间隔是动态变化的呢？
使用 setTimeout 代替

【解决方案2】：

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

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

【讨论】：

load() 不是以这种方式使用的 jQuery 函数。加载用于 AJAX
Load 不适用于 Ajax，请@Hurda 参考文档 (api.jquery.com/load-event) 你会看到即使加载完成，Load 也是用来挂钩的。您可以将加载与图像一起使用。但是，我必须同意你的观点，在 Anthony 提供的情况下也不合适。
@Doak - 我仍然认为他提到了api.jquery.com/load ajax load - 它加载了一些内容。实际方法是根据参数选择的——所以我们不能确定。我只是好奇为什么你觉得有必要在 11 个月后尝试纠正我？
好吧，我敢肯定你们两个之间，你们都是对的。我已经很久没有接触 jquery 了，我不记得 load 做了什么。我敢肯定，当我 25 个月前写答案时，我的印象是 load() 可用于重新加载任何窗口或文档对象。就像我说的，我不记得它实际上做了什么。我认为总的来说，我试图提出一个简单且不需要协商同源政策的选项。
实际上，我认为 Hurda 假设我的意思是非常可笑的，因为他们都不会真正实现我所建议的。为什么我认为用于 ajax 的方法会重新加载 iframe，而不是认为用于事件绑定的方法会重新加载它？如果有的话，我可能在考虑纯 js 以及您使用“onblah”进行绑定和“blah”来触发事件的方式。无论哪种方式，该方法都不会重新加载 iframe，所以我编辑了我的答案。

【解决方案3】：

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

【讨论】：