项目上做了一个具有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. [ 原创 ] Java基础1--Java中super和this的用法和区别

    许多同学在学习Java时分不清楚this和super的用法和区别,今天偶然发现一片加精的博文,看完内容准备自己也写下来积累一下 1.如果想在子类的构造方法中调用父类的构造方法,必须在子类的构造方法中使 ...

  2. android studio 汉化包 美化包

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 汉化包 百度云盘 下载地址:https://pan.baidu.com/s/1pLjwy ...

  3. Spring之Spring环境搭建

    Spring之Spring环境搭建 一.什么是Spring? Spring框架是由于软件开发的复杂性而创建的.Spring使用的是基本的JavaBean来完成以前只可能由EJB完成的事情.然而,Spr ...

  4. [NOI2018]你的名字(SAM+线段树合并)

    考虑l=1,r=n的68分,对S和T建SAM,对T的SAM上的每个节点,计算它能给答案带来多少贡献. T上节点x代表的本质不同的子串数为mx[x]-mx[fa[x]],然后需要去掉所代表子串与S的最长 ...

  5. 关于zip伪加密

    创建一个zip文件 然后用winhex打开 可以看到第二个PK头的地方对应hex区域有一场串0000000000 在这里的第四个0这里末尾修改成奇数 奇数为加密 偶数为不加密 再去打开就可以看到加密了

  6. CF1060C Maximum Subrectangle【乘法分配律】【最大子矩阵】

    CF1060C Maximum Subrectangle 题意翻译 现在给出一个长度为N的a数列,一个长度为M的b数列. 现在需要构造出一个矩阵c,其中ci,j​=ai​×bj​.再给出一个x,请在矩 ...

  7. Windows下openssl安装及使用

    配置过程中需要生成一些mak文件,这些生成代码用perl脚本生成,所以要安装一个ActivePerl. 网址: http://www.activestate.com/activeperl/ 下载后直接 ...

  8. BMP文件格式实例分析

    1. 以下为一个RGB565-16位BMP位图实际的部分数据: 00000000h: 42 4D 46 58 02 00 00 00 00 00 46 00 00 00 28 00 ; BMFX... ...

  9. 【idea】idea重新打包依赖了父级项目的子级项目,父级项目代码改变,但是子级项目打包依旧是老的代码 问题解决

    最简单的方法: 就是单独打包父级项目,然后替换本地maven仓库中的父级项目的jar,然后重新打包子级项目,就可以了.

  10. Android开发之ListView条目批量选择删除

    ListView实现的列表,假设是可编辑,可删除的,一般都要提供批量删除功能,否则的话,一项一项的删除体验非常不好,也给用户带来了非常大的麻烦. 实现效果图 详细实现代码 select.xml 主布局 ...