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

时间: 2024-12-20 06:26:23

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

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

Flash AS3.0 加载外部资源(图片,MP3,SWF)的两种方式 出自:http://www.cnblogs.com/top5/archive/2012/08/04/2623464.html 关于AS3加载图片等外部资源,我常用的有两种方式:Loader和Embed,各自的特点,总结如下: Embed:在Flash编译阶段就将资源嵌入,也就是说图片资源是会被编译进swf文件里面去的:这样子的好处是代码比较简洁,使用方便,也不存在加载顺序的问题,缺点是会增大swf文件的体积 Loader:在

Unity3D动态加载外部资源

最近一直在和这些内容纠缠,把心得和大家共享一下: Unity里有两种动态加载机制:一是Resources.Load,一是通过AssetBundle,其实两者本质上我理解没有什么区别.Resources.Load就是从一个缺省打进程序包里的AssetBundle里加载资源,而一般AssetBundle文件需要你自己创建,运行时动态加载,可以指定路径和来源的. 其实场景里所有静态的对象也有这么一个加载过程,只是Unity后台替你自动完成了. 详细说一下细节概念:AssetBundle运行时加载:来自

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

导致这个错误的主要原因是未添加IOErrorEvent事件监听,或者添加了监听,但是加载时使用了unload() 参考资料: http://blog.csdn.net/chjh0540237/article/details/9325797 添加IOErrorEvent事件监听,针对Loader和URLLoader添加方式有所不同 var loader:Loader = new Loader(); loader.contentLoaderInfo.addEventListener(IOErrorE

“不同浏览器对于同一域名的并发获取(加载)资源数是有限的”

转自:http://www.nowamagic.net/librarys/veda/detail/1077 这个总结来源于一次优化的请求,最初某个页面的加载十分缓慢,load事件迟迟无法触发,因此希望可以通过对静态文件分域名等方式对页面的外部资源进行优化,拿得load事件尽可能早地触发.于是我查看了页面的源码,并对外部资源进行了整理,基于下面2个理念画出了一个推测的瀑布图: 浏览器对同一个域只能并发2个HTTP请求 - 网上盛传已久. javascript文件的加载会阻塞浏览器其他资源的加载 -

iframe加载onload之坑

需求:点击按钮,下载一个文件,由于种种原因,需要借助iframe实现. 实现:点击按钮往页面上append一个iframe,将iframe的src设置为文件的url路径,实现下载.如果url不对或文件下载失败,提示下载失败. 畅想:iframe.onload=function(){ //下载成功:}      iframe.onerror = function(){ //下载失败 } 问题:想的挺好,可惜浏览器有意见.经测试,火狐及chorme都不支持onerror事件,而且,不管iframe加

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

<div id="load" align="center"> <img src="http://sc.cnwebshow.com/upimg/allimg/070707/01294420.gif" /> loading </div> <!-- 首先放一个div,用做loading效果 --> <iframe id="demo" src="http://www.**

[Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏

前言 Load Mask(遮罩)效果,就是在页面还没有完全显示出来之前, 加上一个转装转的效果. 类似: 添加这样的效果有两个好处: 1. 在页面没完全show出来之前, 把后面的页面给遮罩起来, 防止进行一些非法的操作. 2. 如果页面show出来的时间比较长的话, 可以暂时吸引用户的注意力(也就是提高 User Experience). 在Extjs 中, Ext js 的使用方式有多种. 你有可能会发现为什么有的状况下load mask 不出现?  且听下面一一道来... JsonStor

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

[源码下载] 作者:webabcd 介绍背水一战 Windows 10 之 资源 CustomResource ResourceDictionary 加载外部的 ResourceDictionary 文件 示例1.演示“CustomResource”相关知识点CustomResourceTest.cs /* * 本例是一个自定义 CustomXamlResourceLoader,用于演示 CustomResource 的使用 */ using Windows.UI.Xaml.Resources;

资源: CustomResource, ResourceDictionary, 加载外部的 ResourceDictionary 文件

CustomResource ResourceDictionary 加载外部的 ResourceDictionary 文件 示例1.演示“CustomResource”相关知识点Resource/CustomResourceTest.cs /* * 本例是一个自定义 CustomXamlResourceLoader,用于演示 CustomResource 的使用 */ using Windows.UI.Xaml.Resources; namespace Windows10.Resource {