项目上做了一个具有wizard(向导)功能的菜单导航页面,子页面的引入通过主页面上iframesrc属性切换实现。为了有个良好的交互体验,每次更新iframesrc时,主页面上都显示一个模态的loading效果,等iframe指定的页面加载完后,再通过iframeonload回调来隐藏loading效果。

常规的代码如下:

点击菜单项时,调用setUrl传入需要载入的子页面url,显示loading效果,页面加载完毕,隐藏loading效果。看起来好像没有什么问题。

由于该项目浏览器兼容性上要求为IE8+,就在winXP的IE8上测试了下,发现问题来了。

iframeonload只执行了一次,即第一次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. [ 转载 ] Centos安装Mysql数据库纪录

    yum install mysql-community-server依赖关系错误 https://www.cnblogs.com/lzj0218/p/5724446.html rpm -qa|grep ...

  2. 某gov的逻辑漏洞

    首先找一个号 在企业信息里面查看到大量的企业名称和组织机构代码 随后去找回密码那 可以看到是直接显示了用户名和密码 随后去登录 可以看到大量的工程信息个企业注册信息 ​

  3. hdu 5308 (2015多校第二场第9题)脑洞模拟题,无语

    题目链接:http://acm.hdu.edu.cn/listproblem.php?vol=44 题意:给你n个n,如果能在n-1次运算之后(加减乘除)结果为24的输出n-1次运算的过程,如果不能输 ...

  4. phalcon Model 'partitions' could not be loaded(模型不支持分区语句)

    注意: 很明确提示用phalcon自带的模型层是不能用partition这个关键字的 解决方法: 自己写个PDO类 然后用pdo中的query方法执行语句成功: mysql分区目的 是减少数据库的负担 ...

  5. POJ Anniversary party 树形DP

    /* 树形dp: 给一颗树,要求一组节点,节点之间没有父子关系,并且使得所有的节点的权值和最大 对于每一个节点,我们有两种状态 dp[i][0]表示不选择节点i,以节点i为根的子树所能形成的节点集所能 ...

  6. 读书笔记_Effective_C++_条款三十一:将文件间的编译依存关系降至最低(第三部分)

    下面来谈谈书中的第二部分,用Interface Classes来降低编译的依赖.从上面也可以看出,避免重编的诀窍就是保持头文件(接口)不变化,而保持接口不变化的诀窍就是不在里面声明编译器需要知道大小的 ...

  7. asp.net 判断日期是否为空

    if (Birthday == DateTime.MinValue) { //u can do something here } 首先确保Birthday是不可为null的日期类型.如果可为null就 ...

  8. SlickSafe.NET 开源权限框架开发指南

    前言:本文适用于快速搭建权限系统的用户,尤其适用于希望有良好定义的权限模型建立:系统解决方案是在基于角色访问控制(RBAC)策略基础上的权限访问模型实现,主要完成了后台权限验证逻辑和前端权限数据验证的 ...

  9. Syncthing vs BitTorrent Sync

    Syncthing 是一款跨平台的文件同步工具.即你在一台设备上创建.修改或删除文件,在其他设备上会同步执行相同的操作.Syncthing 不会将你的数据上传到云端,而是在你的多台设备同时在线时对指定 ...

  10. ConcurrentHashMap JDK 1.6 源码分析

    前言 前段时间把 JDK 1.6 中的 HashMap 主要的一些操作源码分析了一次.既然把 HashMap 源码分析了, 就顺便把 JDK 1.6 中 ConcurrentHashMap 的主要一些 ...