當我更改 iframe 在 DOM 中的位置時，如何停止重新加載 iframe？

Question

當我改變它在 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

考慮到您的測試用例的簡單性，看起來您可以將一個元素放入另一個元素的唯一方法將始終強制重新加載內容。

[編輯] 在看到你想要做什么之后，你可以嘗試一些事情：

1. 所有廣告都可以在 IFRAME 中投放（在您自己的網站上），它不會阻止頁面加載，並且可以立即放置在正確的位置。
2. 如上所述，IFRAME 不會阻止頁面加載，因此如果它們是 IFRAME，您可以立即將廣告放置到位，如果它們是其他東西，則將它們加載到底部。 當然，如果緩慢的部分在您知道是否要獲得 IFRAME 之前，這將不起作用。
3. 您可以將內容保留在它的占位符 DIV 中，但是當它完成加載時，只需在頁面中的正確位置重新定位（使用 CSS 絕對定位）。 不是最優雅的解決方案，但應該可以正常工作。

Answer 2

我很后悔我原來的回答，因為它似乎引起了其他的頭痛。 以下是您可能沒有嘗試過的其他一些潛在解決方案：

• 將廣告腳本放在 div 中，並將其display樣式設置為none 。 然后，將它們移動到最終目的地並將它們更改為display: block在頁面加載后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？