代码改变世界

判断iframe框架是否加载完成的方法

2013-02-20 09:59  埋头前进的码农  阅读(7931)  评论(5编辑  收藏  举报

理论上来说框架里面加载的是一个完成的html文档,其判断的方法和平常html文件加载应该一致。最近在一个项目中用到了iframe框架,需要判断框架中的文档是否加载完毕,加载完后再进行下一步的操作,这里找到了几个方法来实现判断:

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

if (!/*@cc_on!@*/0) { //if not IE
    iframe.onload = function(){
        alert("框架加载完毕.");
    };
} else {
    iframe.onreadystatechange = function(){
        if (iframe.readyState == "complete"){
            alert("框架加载完毕.");
        }
    };
}

document.body.appendChild(iframe);

后来有个牛人找到了如下更完美的处理方法:

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

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);

相比较值钱的方法可以发现,这个方法使用了onload方法来判断,这种方法判断框架是否加载完毕比之前的readystatechange 事件更加稳定。在IE浏览器中,需要通过attachEvent方法来注册onload事件。这样就可以完美的判断框架是否加载完毕了。

PS:这里说的IE浏览器中onload方法是隐形的是指,动态创建的iframe需要通过attachEvent来绑定事件,而已经存在写在html文档里面的IE中也支持iframe.onload事件.