iframe 加载外部资源，显示隐藏loading，onload失效
iframe 加载外部资源，显示隐藏loading，onload失效
lin_zone
发布于 2018-08-15 11:19:16
发布于 2018-08-15 11:19:16
在项目中使用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隐藏了
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-09-23 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读