Question

当我更改DOM在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），在这种情况下广告会加载两次并且服务混乱。

Answer 1

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

[修改]在看到您尝试做的事情后，您可以尝试以下几种方法：

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

Answer 2

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

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

Answer 3

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

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

此致

Answer 4

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

Answer 5

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

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

5 个答案: