在项目中使用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. Error: Invalid or corrupt jarfile

    使用IDEA通过MAVEN创建quickstart项目后,添加了Artifacts,发现生成的jar包无法run,出现下面的错误: Error: Invalid or corrupt jarfile ...

  2. HRMS(人力资源管理系统)-从单机应用到SaaS应用-系统介绍

    上周发布的<2018,全新出发(全力推动实现住有所居)>文章,其中记录了个人在这5年过程中的成长和收获,有幸认识了不少博客园的朋友,大家一起学习交流,在这个过程当中好多朋友提出SaaS系统 ...

  3. jquery-网站收藏

    jquery跑马灯:http://www.dowebok.com/demo/188/index3.html

  4. 【纵谭 Python】系列直播(持续更新)

    老周最近录了一些跟 Python 有关的直播,可以在“一直播”中搜索 ID 号 139251129 关注,也可以在微博中查看,反正都一样,同步的. 第一集:简单胡扯一下相关环境搭建.安装 Python ...

  5. go微服务框架go-micro深度学习(三) Registry服务的注册和发现

    服务的注册与发现是微服务必不可少的功能,这样系统才能有更高的性能,更高的可用性.go-micro框架的服务发现有自己能用的接口Registry.只要实现这个接口就可以定制自己的服务注册和发现. go- ...

  6. centos7 安装curl-7.51.0

    curl简介curl是一个广泛使用的用来上传和下载的命令行工具,当然严格来讲,它还可以有别的用途.对于测试来讲,它是Web相关测试非常实用的工具,包括debugging,使用起来非常方便.而且另一方面 ...

  7. 构建自己的 Smart Life 私有云(一)-> 破解涂鸦智能插座

    博客搬迁至https://blog.wangjiegulu.com RSS订阅:https://blog.wangjiegulu.com/feed.xml 原文链接:https://blog.wang ...

  8. select 与 time.After 配合使用的问题

    今天在工作中发现了一个有趣的现象. 在一个select中设定了两个定时器,本来预计哪个定时器到达就运行相应指令的,但是发现最终只有时间最短的定时器一直得到执行,其它定时器完全没有得到执行. packa ...

  9. Asp.Net Nuget常用命令

    1.安装 Install-Package EntityFramework //ef Install-Package EntityFramework.zh-Hans //ef中文

  10. 解决Warning Couldn't flush user prefs: java.util.prefs.BackingStoreException: Couldn't get file lock.

    系统:Ubuntu 16.04 LTS 环境:vscode+java extension pack打开了一个gradle的java项目:另外,用一个terminal启动了groovysh 报错: gr ...