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

Question

我正在嘗試檢測 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 何時加載且其文檔准備就緒的正確方法是什么？

Answer 1

檢測 iframe 何時加載並且其文檔已准備就緒？

如果您可以讓 iframe 從框架內的腳本中告訴您自己，那將是理想的選擇。 例如，它可以直接調用一個父函數來告訴它它已經准備好了。 跨框架代碼執行總是需要小心，因為事情可能以您不期望的順序發生。 另一種選擇是設置 'var isready= true;' 在它自己的范圍內，並讓父腳本嗅探“contentWindow.isready”（如果沒有，則添加 onload 處理程序）。

如果由於某種原因讓 iframe 文檔協作不切實際，您就會遇到傳統的負載競爭問題，即即使元素彼此相鄰：

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

無法保證該項目在腳本執行時尚未加載。

擺脫負載競爭的方法是：

1. 在 IE 上，您可以使用“readyState”屬性來查看是否已經加載了某些內容；

2. 如果項目僅在啟用 JavaScript 時可用是可以接受的，您可以動態創建它，在設置源和附加到頁面之前設置 'onload' 事件函數。 在這種情況下，在設置回調之前無法加載；

3. 將它包含在標記中的老式方法：

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

HTML 中的內聯“onsomething”處理程序幾乎總是錯誤的，應該避免，但在這種情況下，有時它是最不壞的選擇。

Answer 2

請參閱此博客文章。 它使用 jQuery，但即使您不使用它，它也應該對您有所幫助。

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

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

Answer 3

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

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

Answer 4

對於使用 Ember 的任何人，這應該按預期工作：

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

Answer 5

jQuery(document).ready(function () {
    jQuery('iframe').load(function() {
        console.log(jQuery(this))
    });
})

Answer 6

1. 此代碼在沒有 jquery的情況下檢測 iframe 內容何時加載：

信用Biranchi 的回答

    // wait for the doc to load (wait for the class 'iframe...' to load) before sending the script
    checkIframeLoaded()
    
    function checkIframeLoaded() {
        // console.log(" function checked")
        // Get a handle to the iframe element
        var iframe = document.getElementsByClassName("docs-texteventtarget-iframe")[0];
        console.log("iframe", iframe)
        // check if the iframe is loaded or not (= undefined = null)
        if (iframe == null) {
            // If we are here, it is not loaded. Set things up so we check the status again in 1000 milliseconds
            window.setTimeout(checkIframeLoaded, 1000);
        } else {
            var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
            // Check if loading is completed
            if (iframeDoc.readyState == 'complete') {
    
                // The loading is complete, call the function we want executed once the iframe is loaded
                iframeDoc.addEventListener("keydown", dispatchkeyboard, false);
            } else {
                // even if the iframe is loaded the "readystate may not be completed yet" so we need to recall the function.
                window.setTimeout(checkIframeLoaded, 1000);
            }
        }
    }
    
  

1. 此代碼適用於 jquery ：

信用：吉爾斯·布斯凱的回答

    // use jquery to detect when iframe is loaded but doesn't work offline
    // (this code needs jQuery because it use the "$" below). if you use it; add this require in the ===usercript=== section
    //  @require    http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

    var editingIFrame = $('iframe.docs-texteventtarget-iframe')[0];
   if (editingIFrame) {
        console.log("inside doc.getele")
        editingIFrame.contentDocument.addEventListener("keydown", dispatchkeyboard, false);
    }