iframe 加载外部资源，显示隐藏loading，onload失效

Posted 2020-10-08 lin_zone

在项目中使用iframe 来加载外部资源，需要在iframe请求外部资源的时候，需要显示一个loading，在加载完成后，将这个loading隐藏掉，刚开始看到W3C中 iframe有一个 onload事件----该事件在iframe加载资源完成后就会触发，但是这个事件我试了试，发现触发不了，最在https://stackoverflow.com/questions/20572734/load-event-not-firing-when-iframe-is-loaded-in-chrome找到了有效的方法

 

解决办法如下：

1 <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隐藏了