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

Question

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

89

我想问一下，是否可以通过一个包含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>

- Audun

帖子底部未显示，但是它是基本的html，内嵌了一个iframe。 - Audun

@Audun：我已经为你修复了；下次请将所有内容都高亮并使用代码按钮。此外，留出空格很好。 - geowa4

类似 http://webPage1.com 的内容需要用引号括起来！// 表示注释！ - geowa4

3个回答

8

如果你只想改变iframe指向的位置而不是iframe内部的实际内容，你只需要更改src属性。

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

- Anthony

2

load()不是以这种方式使用的jQuery函数。Load用于AJAX。 - Hurda

Load不适用于Ajax，请@Hurda参考文档（http://api.jquery.com/load-event/）。您会发现Load用于在完成加载时挂钩事件。您可以将Load与图像一起使用。但是，我必须同意您在Anthony提供的情况下也不合适。 - Patrick Desjardins

@Doak - 我仍然认为他指的是 http://api.jquery.com/load/ ajax load - 它会加载一些内容。实际的方法是基于参数选择的 - 所以我们不能确定。我只是好奇你为什么感觉有必要在11个月后试图纠正我？ - Hurda

嗯，我相信你们两个都是对的。自从我上次接触jquery以来已经很长时间了，我不记得load函数具体是做什么的了。我敢肯定，在25个月前写答案时，我认为load()可以用于重新加载任何窗口或文档对象。就像我说的，我现在已经记不清它实际上是做什么了。总的来说，我想提供一个简单的选项，不需要协商同源政策。 - Anthony

其实，我认为Hurda假设我指的是哪种方法相当荒谬，因为它们都不能实现我所建议的功能。我为什么会认为一个专门用于ajax的方法会重新加载iframe，而不是像专门用于事件绑定的方法一样？如果有什么区别，可能是我在考虑纯js和使用“onblah”进行绑定以及使用“blah”触发事件的方式。无论如何，这种方法都不能重新加载iframe，所以我编辑了我的答案。 - Anthony

无法将值分配给函数调用。 - dbkaplun

4

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

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Anatoliy · Accepted Answer

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