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找到了有效的方法
解决办法如下:
<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失效的更多相关文章
- Spark动态加载外部资源文件
Spark动态加载外部资源文件 1.spark-submit --files 动态加载外部资源文件 之前做一个关于Spark的项目时,因项目中需要读取某个静态资源文件,然后在本地IDEA测试一切皆正常 ...
- Error #2044: 未处理的 IOErrorEvent:。 text=Error #2035: 找不到 URL这是flash加载外部资源时有时会遇到的问题,对于此问题解决如下
导致这个错误的主要原因是未添加IOErrorEvent事件监听,或者添加了监听,但是加载时使用了unload() 参考资料: http://blog.csdn.net/chjh0540237/arti ...
- 转载:Flash AS3.0 加载外部资源(图片,MP3,SWF)的两种方式
Flash AS3.0 加载外部资源(图片,MP3,SWF)的两种方式 出自:http://www.cnblogs.com/top5/archive/2012/08/04/2623464.html 关 ...
- Unity3D动态加载外部资源
最近一直在和这些内容纠缠,把心得和大家共享一下: Unity里有两种动态加载机制:一是Resources.Load,一是通过AssetBundle,其实两者本质上我理解没有什么区别.Resources ...
- spark-submit --files 动态加载外部资源文件
在做spark时,有些时候需要加载资源文件,需要在driver或者worker端访问.在client模式下可以使用IO流直接读取,但是在cluster模式下却不能直接读取,需要如下代码: val is ...
- vc 加载外部资源,释放DLL
#include "stdafx.h"#include "resource.h" #include <Windows.h> #include < ...
- javscript 实现iframe加载内容页出现LOADING效果
<div id="load" align="center"> <img src="http://sc.cnwebshow.com/u ...
- vue项目未加载完成前显示loading...
1.在Index.html里面加入loading的元素,让loading元素显示,让app元素隐藏 <!DOCTYPE html> <html> <head> &l ...
- 背水一战 Windows 10 (11) - 资源: CustomResource, ResourceDictionary, 加载外部的 ResourceDictionary 文件
[源码下载] 背水一战 Windows 10 (11) - 资源: CustomResource, ResourceDictionary, 加载外部的 ResourceDictionary 文件 作者 ...
随机推荐
- header 跳转时报错误。Header may not contain more than a single header, new line detected
我在用php的header做跳转时,报错误. Header may not contain more than a single header, new line detected 先贴一下代码: c ...
- 修改编辑器为Markdown编辑器
一直都在使用cnblogs的TinyMCE,不过感觉好久不更新,还是用Markdown吧,写多了Markdown 还真是受感染呢. 学习下吧,边学便用. 参考链接: 序列图 [简明版]有道云笔记Mar ...
- python下的selenium和PhantomJS
一般我们使用python的第三方库requests及框架scrapy来爬取网上的资源,但是设计javascript渲染的页面却不能抓取,此时,我们使用web自动化测试化工具Selenium+无界面浏览 ...
- 微信小程序登录逻辑
wx.getStorage({ key: 'session_id', success: function(res) { //如果本地缓存中有session_id,则说明用户登陆过 console.lo ...
- FutureTask类
FutureTask类是Future 的一个实现,并实现了Runnable. 所以可通过Executor(线程池)来运行,也可传递给Thread对象运行. 假设在主线程中须要运行比較耗时的操作时.但 ...
- 阿里云物联网平台体验(树莓派+Nodejs篇)
我们在<阿里云物联网平台体验(树莓派+python篇)>里,写了通过Python语言开发云到端的物联网程序,本篇文章将介绍通过nodejs来实现类似功能. 同样在阿里云官方文档里已经有了一 ...
- IsDebuggerPresent原理及其 c++实现
在IsDebuggerPresent下断,步入得到如下代码: 75 A1 | ] | eax:std::cout 75 | ] | eax:std::cout 75 | ] | eax:std::co ...
- iOS--App功耗优化
良好的用户体验需要如下要素: 电池寿命长.随着能效降低,电池寿命也会降低.但用户想让自己的移动设备全天候待命. 速度快.iOS系统处理复杂操作时仍能提供很好的性能. 响应快.同一时刻消耗太多资源会使U ...
- ELK 6.X 版本下xpack破解
ELK 6.2.2 版本下xpack破解 1.下载xpack 先下载最新版本的 x-pack,里面包含了 es,kibana,logstash 新版本的x-pack 下载地址:https://arti ...
- CentOS 7.2编译安装PHP7
原文: https://typecodes.com/web/centos7compilephp7.html?utm_source=tuicool&utm_medium=referralPHP官 ...