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找到了有效的方法

 

解决办法如下:

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

posted @ 2017-09-23 17:12  lin_zone  阅读(2437)  评论(2编辑  收藏