iframe 加載外部資源，顯示隱藏loading，onload失效

在項目中使用iframe 來加載外部資源，需要在iframe請求外部資源的時候，需要顯示一個loading，在加載完成后，將這個loading隱藏掉，剛開始看到W3C中 iframe有一個 onload事件----該事件在iframe加載資源完成后就會觸發，但是這個事件我試了試，發現觸發不了，最在https://stackoverflow.com/questions/20572734/load-event-not-firing-when-iframe-is-loaded-in-chrome找到了有效的方法

 

解決辦法如下：

<iframe class="html_area" src="http://www.baidu.com"></iframe>

設一個變量，var show_loading = true;   //這個變量為真表示loading顯示，反之loading隱藏

然后 設一個計時器

var self = this
var html_iframe = document.getElementsByClassName('html_area')[0]
var interval = setInterval(function () {
    var iframeDoc = html_iframe.contentDocument || html_iframe.contentWindow.document;
    if(iframeDoc.readyState == 'complete' || iframeDoc.readyState == 'interactive'){
        self.show_iframe_loading = false
        clearInterval(interval)
    }
},500)

這樣在剛開始請求的時候就顯示loading，然后啟動了計時器，每500ms檢測一次，如果iframe內有內容的話，就將loading隱藏了