iframe之onload事件小记
项目上做了一个具有wizard(向导)功能的菜单导航页面,子页面的引入通过主页面上iframe
的src
属性切换实现。为了有个良好的交互体验,每次更新iframe
的src
时,主页面上都显示一个模态的loading效果,等iframe
指定的页面加载完后,再通过iframe
的onload
回调来隐藏loading效果。
常规的代码如下:
点击菜单项时,调用setUrl
传入需要载入的子页面url
,显示loading效果,页面加载完毕,隐藏loading效果。看起来好像没有什么问题。
由于该项目浏览器兼容性上要求为IE8+,就在winXP的IE8上测试了下,发现问题来了。
iframe
的onload
只执行了一次,即第一次iframe
页面载入时触发了onload
,后来的src
切换均没有触发该事件,以达到预期的效果。
老版本的IE总是比较坑的。
Google了下,发现在IE8中以iframe.onload
的形式进行事件绑定确实存在上述问题。
乐于分享的coder们在他们的博客中推荐使用IE8-私有的attachEvent
来进行事件绑定,故对原先iframe
的事件绑定部分做了调整。
调整后,在IE8中又测了下,问题得到了解决。不过还是觉得,这个代码略显繁琐,项目中也使用了jQuery
为前端基础库,jquery在事件绑定上已经做了兼容性处理,应该直接用jquery的on方法即可,对代码又进行了一点调整。
看起来简单多了,测试了下也没有问题,达到了预期的效果。
iframe之onload事件小记的更多相关文章
- window/body/img/iframe 的onload事件
在html页面中,只有body,img,iframe这一类标签具有onload事件. onload事件表示在当前元素载入完成后发生的事件.其中,window也有onload事件,但是跟body的是同一 ...
- 关于IFRAME的onload事件
昨天遇到一个关于iframe的问题,比如a页面中嵌入了一个iframe称为a_iframe,如果直接在a_iframe的标签上直接加入属性的设置,onload=’’,这样才onload事件才是起作用的 ...
- 【HTML】Iframe中的onload事件
当iframe.src重新指定一个url时会重新执行iframe的onload事件 <iframe id="indexFrame" name="index" ...
- IE IE8 iframe的onload方法分析 IE浏览器onload事件失效
判断iframe是否加载完成的完美方法 IE 支持 iframe 的 onload 事件,不过是隐形的,需要通过 attachEvent 来注册. 第二种方法比第一种方法更完美(采用readystat ...
- iframe 动态onload事件处理方式
转自:http://w3help.org/zh-cn/causes/SD9022 标准参考 关于 HTML 4.01 规范中 BODY 标记的 onload 属性说明: http://www.w3.o ...
- 解决Chrome Safari Opera环境下 动态创建iframe onload事件同步执行
我们先看下面的代码: setTimeout(function(){ alert(count); },2000); var count = []; document.body.appendChild(c ...
- iframe onload事件触发两次
标准参考 关于 HTML 4.01 规范中 onload 内在事件说明:http://www.w3.org/TR/html401/interact/scripts.html#adef-onload 关 ...
- IFRAME动态加载触发onload事件(转)
原文地址:http://blog.ops.cc/webtech/javascript/f5nhm.html <body> <script>var iframe = docume ...
- jQuery $(document).ready()和JavaScript onload事件
jQuery $(document).ready()和JavaScript onload事件 Why we need a right time? 对元素的操作和事件的绑定需要等待一个合适的时机,可以看 ...
随机推荐
- 简单介绍下python中函数的基础语法
python 函数 定义 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可. 特性 减少代码重复 使程序变得可扩展 使程序变得易于维护 函数的创建 pyt ...
- leetcode 链表 两数相加
两数相加 给定两个非空链表来表示两个非负整数.位数按照逆序方式存储,它们的每个节点只存储单个数字.将两数相加返回一个新的链表. 你可以假设除了数字 0 之外,这两个数字都不会以零开头. 示例 ...
- django组件之contenttype(一)
方式1:适用于1张表和另一张表要关联的时候. 1.路飞学成表设计: 2.将2个价格策略表合并1张表. 3.如果再加一张表,那价格策略表的表结构会发生改变. 这样不合理的,我们的表结构一般设计完就不会 ...
- 冒泡排序(初级版)之C++实现
冒泡排序(初级版)之C++实现 一.源代码:BubbleSortLow.cpp /*冒泡排序思想: 从第一个元素开始,对数组中两两相邻的元素比较,将值较小的元素放在前面,值较大的元素放在后面: 一轮比 ...
- bzoj 5210(树链刨分下做个dp)
5210: 最大连通子块和 Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 211 Solved: 65[Submit][Status][Discus ...
- Codeforces Round #248 (Div. 1) B. Nanami's Digital Board 暴力 前缀和
B. Nanami's Digital Board 题目连接: http://www.codeforces.com/contest/434/problem/B Description Nanami i ...
- SPOJ 10234. Here Be Dragons
The Triwizard Tournament's third task is to negotiate a corridor of many segments, and reach the oth ...
- HDU step by step
section 1 不解释~ section 2 1.2.1 a+b coming #include<stdio.h> long long z,x,y; int main( ) { whi ...
- mysql+mycat分片环境部署
说明: 1.操作系统:64位CentOS Linux release 7.2.1511 (Core) 2.jdk版本:1.8.0_121 3.mysql版本: 5.7.17 4.两台mysql服务器: ...
- SpringBoot读取配置properties配置文件
见:http://www.cnblogs.com/VergiLyn/p/6286507.html