檢測何時加載了Iframe內容（跨瀏覽器）

我試圖檢測iframe及其內容何時加載但沒有太多運氣。我的應用程序在父窗口的文本字段中輸入一些內容並更新iframe以提供「實時預覽」檢測何時加載了Iframe內容（跨瀏覽器）

我開始使用以下代碼（YUI）來檢測何時發生iframe加載事件。

$E.on('preview-pane', 'load', function(){ 
    previewBody = $('preview-pane').contentWindow.document.getElementsByTagName('body')[0]; 
}

'preview-pane'是我的iframe的ID，我使用YUI來附加事件處理程序。然而，試圖訪問我的回調（在iframe加載時）的主體失敗，我認爲是因爲iframe在事件處理程序準備好之前加載。如果我通過使生成睡眠的php腳本延遲iframe加載，此代碼有效。

基本上，我問什麼是正確的方法跨瀏覽器檢測何時加載iframe和其文檔準備好了？

來源

2009-04-15 David Snabel-Caunt

開始接觸YUI是一個壞主意（以及任何其他JS庫）。爲什麼？因爲你無法知道圖書館在做什麼魔術。如果他們不能完全支持「加載」，那麼最好用清晰可讀的javascript自己完成。 – Christian 2011-05-24 08:22:47

您可以經常閱讀庫@Christian的源代碼。我發現這通常會爲您提供有關如何自行完成的重要提示，無論您是否使用其實施。 – AJP 2013-03-06 14:07:28

@AJP你誤解了我的觀點。如果你正在做一些你不確定的事情，那麼最好少一些代碼，這樣錯誤的空間就會減少。 – Christian 2013-03-06 17:43:09

當iframe中加載檢測和文件已準備就緒？

如果您可以讓iframe通過框架內的腳本告訴您自己，那將是理想的選擇。例如，它可以直接調用父函數來告訴它已準備就緒。對於跨幀代碼執行，始終需要小心，因爲事情可能以您不期望的順序發生。另一種方法是在自己的作用域中設置'var isready = true;'，並讓父腳本嗅探'contentWindow.isready'（如果不是，則添加onload處理程序）。

如果由於某種原因，它是不實際的iframe文檔協同工作，你已經得到了傳統的負載種族問題，即，即使元素是緊挨着對方：

<img id="x" ... /> 
<script type="text/javascript"> 
    document.getElementById('x').onload= function() { 
     ... 
    }; 
</script>

不能保證該項目在腳本執行時不會被加載。

出負載比賽的方式是：

在IE瀏覽器，你可以使用「readyState的」屬性，看看是否有什麼地方已經加載;
如果僅在啓用JavaScript的情況下才能使用該項目，則可以動態創建該項目，並在設置源代碼並追加到頁面之前設置「onload」事件函數。在這種情況下，它不能在回調設置之前加載;
，包括它在標記的老派的方式：

<img onload="callback(this)" ... />

在線「onsomething」在HTML處理器幾乎都是錯誤的東西，並要避免，但在這有時候這是最糟糕的選擇。

來源

2009-04-15 13:04:50 bobince

請參閱this博客文章。它使用jQuery，但它應該可以幫助你，即使你不使用它。

基本上你添加到您的document.ready()

$('iframe').load(function() { 
    RunAfterIFrameLoaded(); 
});

來源

2009-04-15 12:23:33 kgiannakakis

對於那些使用React的人來說，檢測同一個iframe加載事件就像在iframe元素上設置onLoad事件偵聽器一樣簡單。

<iframe src={'path-to-iframe-source'} onLoad={this.loadListener} frameBorder={0} />

來源

2016-12-26 11:11:51

對於使用灰燼的人，這應該按預期工作：

<iframe onLoad={{action 'actionName'}} frameborder='0' src={{iframeSrc}} />

來源

2017-02-12 22:58:29

檢測何時加載了Iframe內容（跨瀏覽器）

回答

相關問題