当我更改其在 DOM 中的位置时，如何停止 iframe 重新加载？

Posted 2023-02-22

【中文标题】当我更改其在 DOM 中的位置时，如何停止 iframe 重新加载？

【英文标题】：How can I stop an iframe reloading when I change its position in the DOM?

【发布时间】：2011-01-15 01:00:03

【问题描述】：

当我改变它在 DOM 中的位置时，有什么方法可以阻止 iframe 重新加载其内容？简单例子：

<script type="text/javascript">
function moveiframe() 
    var dest = document.getElementById('newparent');
    dest.appendChild(document.getElementById('googleframe'));

</script>
<iframe src="http://www.google.com" id="googleframe"></iframe>
<input type="button" onclick="moveiframe()" value="Move" />

单击“移动”按钮会更改 iframe 的父级，并重新加载其内容（在 Firefox 和 Chrome 中，但不是 IE）。

任何建议将不胜感激！

[已更新背景信息]

我正在页面底部的占位符 div 中加载网站的广告（以防止广告加载阻碍页面加载） - 然后在加载后将它们写入的 div 转移到正确的容器中。这一切都很好......除非投放的广告使用 iframe（如 google adsense），在这种情况下，广告会加载两次并且服务会混乱。

【问题讨论】：

iframe 被重新加载，因为您再次将其放入 dom (dest.appendChild(IFRAME))..考虑一个允许您移动它的 javascript 库。

andreas - 你知道任何允许你移动它的 JavaScript 库吗？有兴趣查看源代码，看看他们是如何做到的......

【参考方案1】：

考虑到您的测试用例的简单性，您可以将一个元素放入另一个元素中的唯一方法似乎总是会强制重新加载内容。

[编辑]在看到您要执行的操作后，您可以尝试以下几件事：

所有广告都可以在 IFRAME（在您自己的网站上）中投放，不会阻碍页面的加载，并且可以立即放置在正确的位置。 如上所述，IFRAME 不会阻止页面的加载，因此如果它们是 IFRAME，您可以立即将广告放在适当的位置，如果它们是其他东西，则将它们加载到底部。当然，如果缓慢的部分是在您知道是否要获得 IFRAME 之前，这将不起作用。 您可以将内容保留在其占位符 DIV 中，但加载完成后，只需在页面中的正确位置重新定位（使用 CSS 绝对定位）。不是最优雅的解决方案，但应该可以正常工作。

【讨论】：

基本上，我将网站的广告加载到页面底部的占位符 div 中（以防止广告加载阻碍页面加载） - 然后移动它们已写入的 div装载到正确的容器中。一切都很好......除非投放的广告使用 iframe（如 google adsense），在这种情况下，广告会被加载两次并且服务混乱

我考虑的替代方案是移动加载元素，以便它采用目标元素的位置和位置（而不是采用它）。然而，这似乎打开了一个痛苦的世界，以确保它留在正确的地方？ （就像页面重排一样，目标元素可能会移动 - 但绝对定位的元素会留在错误的位置）。如果您认为这条路线可能值得探索，我会发布一个替代问题？非常感谢您的帮助

感谢瑞西斯。不幸的是，iframe 然后为跨域问题创造了乐趣（对于实际需要直接访问的广告服务标签）。伊皮。对于#3，我在探索这个问题时遇到了一些问题 - 我刚刚在***.com/questions/2233337/… 上发布了一个新问题...希望您有任何想法？

好吧，如果您有一个可以更改外观和回流的动态站点，那么是的，您遇到了问题。 :) 那么现在，我想知道究竟是什么问题促使您在页面末尾加载此内容？

性能 :) 加载广告缓慢。但是...认为我们将采用绝对定位解决方案，并接受如果某些出版商不付出更多努力，它将无法正常工作。感谢您的帮助！

【参考方案2】：

我对我原来的答案感到后悔，因为它似乎引起了其他的头痛。以下是您可能尚未尝试过的其他一些潜在解决方案：

将广告脚本放置在 div 中，并将其 display 样式设置为 none。然后，将它们移动到最终目的地，并在页面加载后将它们更改为display: block。也许这会阻止iframes 最初加载他们的内容。 尝试相同的操作，只是将visibility 设置为hidden，然后更改为visible。

【讨论】：

很好...另一种方法是使用微模板方法将它们作为纯文本加载：<script id="ad1" type="text/html"><iframe src="whatever"/></script> 然后$('#placeholder').html($('#ad1').html()) 将加载该文本（并使其在那时）。请参阅 jQuery 创建者本人的ejohn.org/blog/javascript-micro-templating。

这是个好主意，谢谢雅各布。不幸的是，似乎并没有阻止浏览器在框架中加载两次！

reesis - 不幸的是，因为 iframe 将由广告服务器写出，作为 document.write 的一部分，我不确定我是否可以让它出现在脚本标签中？不过很有趣。会看看。

【参考方案3】：

快速猜测是取消设置 iframe 元素的 src 属性的值或将其设置为“about:blank”。

您可以将之前的值（或任何值）恢复到 iframe 的 src 属性（使用 JavaScript）。

问候，

【讨论】：

在我看来，OP 希望它保持相同的内容而不是刷新它们。

Renesis 是的，没错 :) andreas - 取消设置 src 属性并再次重置它仍然会重新加载页面！

对不起 - 我不经常使用 SO。不知道否决投票是否合适。非常感谢您的帮助，但它并没有解决问题:) 我已经删除了反对票。

无需对答案投反对票，除非它们完全、明显错误或被误导。我给了你+1，安德烈亚斯。感谢您的努力，伙计。

【参考方案4】：

如果广告是固定尺寸的，您可以将它们放置在绝对定位的 div 中。然后，一旦页面加载，您可以将这些容器 div 移动到它们的指定位置。有很多 Javascript 示例用于从相对位置计算绝对位置。当然，您必须在目标 div 中保留视觉空间，这样广告就不会覆盖内容。

【讨论】：

嗨，Jacob - 谢谢。看起来这是最好的方法。我之前尝试过，但遇到了一些问题 - 在这里查看我的帖子：***.com/questions/2233337/… - 非常感谢您提供的任何意见

【参考方案5】：

使用 ajax 请求加载广告内容，并在 ajax 调用返回时将内容添加到 DOM，而不是使用 iframe，怎么样？

【讨论】：

不幸的是，标准的广告投放标签不适合这样做 - 它们都依赖于使用 document.write，并且通常有多个