如何使用 jquery 动态更改 iframe 中的内容？
Posted
技术标签:
【中文标题】如何使用 jquery 动态更改 iframe 中的内容？【英文标题】：How do I dynamically change the content in an iframe using jquery? 【发布时间】：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 之类的东西需要用引号引起来！ // 会发表评论！
【参考方案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;
【讨论】：
以上是关于如何使用 jquery 动态更改 iframe 中的内容？的主要内容，如果未能解决你的问题，请参考以下文章
根据内部更改的内容动态调整 jQuery Fancybox 的 iframe 高度
编写 jQuery 以在单击时更改动态 iframe 的尺寸 [关闭]