项目上做了一个具有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事件小记的更多相关文章

  1. window/body/img/iframe 的onload事件

    在html页面中,只有body,img,iframe这一类标签具有onload事件. onload事件表示在当前元素载入完成后发生的事件.其中,window也有onload事件,但是跟body的是同一 ...

  2. 关于IFRAME的onload事件

    昨天遇到一个关于iframe的问题,比如a页面中嵌入了一个iframe称为a_iframe,如果直接在a_iframe的标签上直接加入属性的设置,onload=’’,这样才onload事件才是起作用的 ...

  3. 【HTML】Iframe中的onload事件

    当iframe.src重新指定一个url时会重新执行iframe的onload事件 <iframe id="indexFrame" name="index" ...

  4. IE IE8 iframe的onload方法分析 IE浏览器onload事件失效

    判断iframe是否加载完成的完美方法 IE 支持 iframe 的 onload 事件,不过是隐形的,需要通过 attachEvent 来注册. 第二种方法比第一种方法更完美(采用readystat ...

  5. iframe 动态onload事件处理方式

    转自:http://w3help.org/zh-cn/causes/SD9022 标准参考 关于 HTML 4.01 规范中 BODY 标记的 onload 属性说明: http://www.w3.o ...

  6. 解决Chrome Safari Opera环境下 动态创建iframe onload事件同步执行

    我们先看下面的代码: setTimeout(function(){ alert(count); },2000); var count = []; document.body.appendChild(c ...

  7. iframe onload事件触发两次

    标准参考 关于 HTML 4.01 规范中 onload 内在事件说明:http://www.w3.org/TR/html401/interact/scripts.html#adef-onload 关 ...

  8. IFRAME动态加载触发onload事件(转)

    原文地址:http://blog.ops.cc/webtech/javascript/f5nhm.html <body> <script>var iframe = docume ...

  9. jQuery $(document).ready()和JavaScript onload事件

    jQuery $(document).ready()和JavaScript onload事件 Why we need a right time? 对元素的操作和事件的绑定需要等待一个合适的时机,可以看 ...

随机推荐

  1. 工具 EZDML表结构设计器

    软件官网:http://www.ezdml.com/ 作者邮箱:huzzz@163.com EZDML EZDML是一个数据库建表的软件. 可快速的进行数据库表结构设计,建立数据模型. 类似大家常用的 ...

  2. 【10.29校内测试】【线段树】【DP】【二进制Trie树求最小值最大】

    Solution 标程太暴力惹QAQ 相当于是26棵线段树的说QAQ 不过我写了另一种写法,从大到小枚举每一个字母,标记字典序在这个字母之上的位置为1,每次都建一棵线段树,维护1的数量,即区间和. 修 ...

  3. 【10.26校内测试】【状压?DP】【最小生成树?搜索?】

    Solution 据说正解DP30行??? 然后写了100行的状压DP?? 疯狂特判,一算极限时间复杂度过不了aaa!! 然而还是过了....QAQ 所以我定的状态是待转移的位置的前三位,用6位二进制 ...

  4. 【BZOJ】1415: [Noi2005]聪聪和可可【期望】【最短路】【记忆化搜索】

    1415: [Noi2005]聪聪和可可 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2335  Solved: 1373[Submit][Stat ...

  5. zoj 3157 Weapon 逆序数/树状数组

    B - Weapon Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu Submit Sta ...

  6. MySql_delete同时删除多表相关联记录

    sql delete同时删除多表相关联记录 sqlserver 支持级联更新和删除oracle 只支持级联删除 删除包含主键值的行的操作,该值由其它表的现有行中的外键列引用.在级联删除中,还删除其外键 ...

  7. UVa11187

    莫勒定理,证明如下: 请结合下图看代码: #include <iostream> #include <math.h> #include <iomanip> usin ...

  8. web语义化,从松散到实战

    GitHub:http://liu12fei08fei.github.io/html/4semantic.html web语义化,从松散到实战 在这篇文章之前,我放弃了很多次,写关于语义化方面的文章: ...

  9. Spring DAO vs Spring ORM vs Spring JDBC

    Pat 的疑惑 最近关注于 Spring 提供的数据访问技术,对于 Spring 相关的这几个项目有何不同我不是太明白: Spring-DAO (http://docs.spring.io/sprin ...

  10. SVN环境

    SVN服务器搭建和使用(一) Subversion是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说. 首先来下载和搭建SVN服务器. 现在Subversion已经迁移到apache网站上 ...