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? 对元素的操作和事件的绑定需要等待一个合适的时机,可以看 ...
随机推荐
- NOIP2018 生气记
今年的题都不怎么难 只是考到的东西相当相当的奇怪... 不想写题解,写出来感觉只是伤心的事 .................... Day1 一进考场就感受到了比去年要严一些... 花了1小时30分 ...
- 鸟哥的私房菜:Bash shell(二)-变量的丰富功能
一 Shell变量的取用与设定,变量规则 由于系统需要一些变量来提供他数据的存取,所以就有一些所谓的『环境变量』 需要来读入系统中了!这些环境变量例如 PATH.HOME.MAIL.SHELL.为了 ...
- hdu 1429 bfs+状压
题意:这次魔王汲取了上次的教训,把Ignatius关在一个n*m的地牢里,并在地牢的某些地方安装了带锁的门,钥匙藏在地牢另外的某些地方.刚开始 Ignatius被关在(sx,sy)的位置,离开地牢的门 ...
- 【洛谷】1477:[NOI2008]假面舞会【图论】
P1477 [NOI2008]假面舞会 题目描述 一年一度的假面舞会又开始了,栋栋也兴致勃勃的参加了今年的舞会. 今年的面具都是主办方特别定制的.每个参加舞会的人都可以在入场时选择一 个自己喜欢的面具 ...
- python及其模块下载集合
1)python平台 https://www.python.org/downloads/ 2)打包工具 cx-freeze(python3以上版本打包工具) http://cx-freeze.sour ...
- leetcode660. Remove 9
leetcode660. Remove 9 题意: 从整数1开始,删除任何包含9的整数,如9,19,29 ... 所以现在,你将有一个新的整数序列:1,2,3,4,5,6,7,8,10,11,... ...
- C#高级编程9-第1章.NET体系结构
C#与NET的关系 C#编写的所有代码必须使用.NET FrameWork运行 C#是一种语言,但它本身不是.NET的一部分 C#一些特性,.NET不支持,.NET一些特性,C#不支持 公共语言运行库 ...
- 读书笔记_Effective_C++_条款三十二:确定你的public继承继承塑模出is-a关系
这一条款是说的是公有继承的逻辑,如果使用继承,而且继承是公有继承的话,一定要确保子类是一种父类(is-a关系).这种逻辑可能与生活中的常理不相符,比如企鹅是生蛋的,所有企鹅是鸟类的一种,直观来看,我们 ...
- bio、nio、aio及select、poll、epoll
BIO与NIO.AIO的区别http://blog.csdn.net/skiof007/article/details/52873421 select.poll.epoll之间的区别总结http:// ...
- PowerDesigner导出表为Excel(转)
打开脚本运行器Ctrl+Shift+X 导出: '*************************************************************************** ...