在项目中使用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隐藏了

iframe 加载外部资源,显示隐藏loading,onload失效的更多相关文章

  1. Spark动态加载外部资源文件

    Spark动态加载外部资源文件 1.spark-submit --files 动态加载外部资源文件 之前做一个关于Spark的项目时,因项目中需要读取某个静态资源文件,然后在本地IDEA测试一切皆正常 ...

  2. Error #2044: 未处理的 IOErrorEvent:。 text=Error #2035: 找不到 URL这是flash加载外部资源时有时会遇到的问题,对于此问题解决如下

    导致这个错误的主要原因是未添加IOErrorEvent事件监听,或者添加了监听,但是加载时使用了unload() 参考资料: http://blog.csdn.net/chjh0540237/arti ...

  3. 转载:Flash AS3.0 加载外部资源(图片,MP3,SWF)的两种方式

    Flash AS3.0 加载外部资源(图片,MP3,SWF)的两种方式 出自:http://www.cnblogs.com/top5/archive/2012/08/04/2623464.html 关 ...

  4. Unity3D动态加载外部资源

    最近一直在和这些内容纠缠,把心得和大家共享一下: Unity里有两种动态加载机制:一是Resources.Load,一是通过AssetBundle,其实两者本质上我理解没有什么区别.Resources ...

  5. spark-submit --files 动态加载外部资源文件

    在做spark时,有些时候需要加载资源文件,需要在driver或者worker端访问.在client模式下可以使用IO流直接读取,但是在cluster模式下却不能直接读取,需要如下代码: val is ...

  6. vc 加载外部资源,释放DLL

    #include "stdafx.h"#include "resource.h" #include <Windows.h> #include < ...

  7. javscript 实现iframe加载内容页出现LOADING效果

    <div id="load" align="center"> <img src="http://sc.cnwebshow.com/u ...

  8. vue项目未加载完成前显示loading...

    1.在Index.html里面加入loading的元素,让loading元素显示,让app元素隐藏 <!DOCTYPE html> <html> <head> &l ...

  9. 背水一战 Windows 10 (11) - 资源: CustomResource, ResourceDictionary, 加载外部的 ResourceDictionary 文件

    [源码下载] 背水一战 Windows 10 (11) - 资源: CustomResource, ResourceDictionary, 加载外部的 ResourceDictionary 文件 作者 ...

随机推荐

  1. git关联远程仓库

    git init git add . git commit -m "0.0.1 release" git remote -v git remote add master repos ...

  2. Gcode命令【转】

    https://www.jianshu.com/p/f8a328457a45 简述 研究过3D打印机的朋友,都会用到G-code文件.要使用3D打印机打印东西要经过几个步骤:        1.创建3 ...

  3. IntelliJ IDEA 下载安装(含注册码)

    https://blog.csdn.net/mashuai720/article/details/79389314

  4. 用分离、附加的方式实现sql server数据库的备份和还原

    一.数据库分离.附加的说明 SQL Server提供了"分离/附加"数据库."备份/还原"数据库.复制数据库等多种数据库的备份和恢复方法.这里介绍一种学习中常用 ...

  5. 每天一个linux命令(10):cat

    1.命令简介 cat (concatenate,连接)命令将[文件]或标准输入组合输出到标准输出,如果没有指定文件,或者文件为"-",则从标准输入读取. 2.用法 cat [选项] ...

  6. SharePonit online 列表表单定制

    1)在O365管理中心,确保启用了站点脚本定制,否则,网站不允许将页面切换到编辑模式. 2)Ribbon上,列表->表单web部件->编辑窗体 如果没有Ribbon,则到列表高级设置,启用 ...

  7. HDU2082母函数模板题

    找单词 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submis ...

  8. python爬虫高级功能

    上一篇文章中我们介绍了爬虫的实现,及爬虫爬取数据的功能,这里会遇到几个问题,比方站点中robots.txt文件,里面有禁止爬取的URL.还有爬虫是否支持代理功能.及有些站点对爬虫的风控措施.设计的爬虫 ...

  9. 浅析LRC歌词文件

    [时间:2018-12] [状态:Open] [关键词:字幕,LRC,歌词,lyric,文件格式] 0 引言 几年前(2010年左右),网络音乐流行与免费的时代,网上有大量的mp3,使用比较常见的播放 ...

  10. QLabel设置文字大小和颜色

    https://blog.csdn.net/fm0517/article/details/4805462 ui.label是QLabel ui.label_4->setText("so ...