一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

IE下iframe的onload事件用法介绍

时间:2012-07-19 编辑:简简单单 来源:一聚教程网

IE 支持 iframe 的 onload 事件,不过是隐形的,需要通过 attachEvent 来注册。
第二种方法比第一种方法更完美(采用readystatechange判断),因为 readystatechange 事件相对于 load 事件有一些潜在的问题。

这里感觉说的并不是完全准确,开始给我造成了很大的困扰。看其代码才明白,真正意义上来讲IE在创建一个新的iframe时的onload方法需要使用attachEvent来绑定,而原来就存在的iframe的onload方法,则可以直接绑定。
说的有些乱,大家看代码,一看便知:

 代码如下 复制代码


在这里,也把原文提到的”判断 iframe 是否加载完成的完美方法”原文摘录至此

 代码如下 复制代码

var iframe = document.createElement("iframe");
iframe.src = "http://www.111com.net";

if (iframe.attachEvent){
    iframe.attachEvent("onload", function(){
        alert("Local iframe is now loaded.");
    });
} else {
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
}

document.body.appendChild(iframe);


IFRAME ONLOAD 事件
在Firefox/Opera/Safari中,直接使用frame元素的onload事件即可:

 代码如下 复制代码
document.getElementById(“iframe1”).onload=function(){
//your codes here.
};

只可惜它在IE下经常无效,因为在IE下它最多只能被激活一次,而且无论你有多少个iframe,被激活的也只能是最后一个的。


原因
这些事件是在IFRAME内的文档对象模型中激活的,而不是父页面的。在IFRAME加载完毕的时候,这个事件就被激活了,而且ReadyState已经是“完成”状态。所以你无法通过这个事件来查检一个IFRAME是否加载完毕。
为了得到更好的表现,我们再稍稍研究一个问题:IFRAME递归。

3.IFRAME 递归
在处理IFRAME时,浏览器应该有一个基本规则,那就是防止递归,防止页面无限的自我加载,使客户端设备崩溃。事实上,文中出现的几个浏览器均做到这点,只是不同的浏览器有不同的处理方式。

请分别尝试以下代码:

 代码如下 复制代码



执行的结果是,在父页面加载时,上面的iframe onload函数在IE/Opera/Safari中均会被激活,Firefox对第二个没有反应。这主要因为他们在防止递归方面的处理是不同的。
对于#hashonly和?search这样的URL,浏览器会解释为页面本身。但hash和search的不同之处是,改变 search可以组成新的源,而改变hash不会。通常地,浏览器一遇到同源的iframe内页即会停止加载,但Safari却会加载多一次。
假如把finish()函数写成如下:

 代码如下 复制代码
var finsh=function(){alert(”onload from :”+this.src);}

运行时分别弹出的消息弹出框的次数如下:

ifm/brw:    IE    |    Firefox    |    Opera    |    Safari iframe1:    1     |       1       |      1      |      0 iframe2:    1     |       0       |      1      |      1 iframe3:    2     |       1       |      2      |      2 iframe4:    1     |       1       |      1      |      1再结合页面所呈现的内容,可得看出这些浏览器在处理递归问题上的一些细则:

•Firefox 不会在iframe中加载任何东西和激活onload事件(可能是任何事件)
•IE和Opera不会在iframe中加载页面,但会激活onload事件。
•Safari(windows版本)会在iframe中加载页面一次且仅仅一次,并会激活onlaod事件且仅激活依附在父页面上那个iframe的onload事件。
关于本节,如果仅把iframe用于页面嵌套,那意义不大;如果用于动态加载/呈现内页,或者用于良好用户体验的form target表单提交处理(不是Ajax),并且要求较高的浏览器兼容性时,作用才会显示出来。根据本节结果,为了提高兼容性,最好事先把iframe指向一个空页面——blank.html,因为它在4种浏览器中的表现是一样的。如果不想事先加载页面,那就得花多点心思去判断浏览器类型了

热门栏目