JS判断iframe加载成功的跨浏览器兼容方案

作者:白露时间:2026-10-30 06:23:15浏览:164

本文介绍在动态添加iframe时,如何判断其加载完成以执行后续操作。针对IE浏览器,利用onreadystatechange事件结合readyState状态(complete或loaded)进行判断;针对Firefox、Opera、Chrome等非IE浏览器,则使用onload事件。文章提供了兼容多种浏览器的综合代码示例,并强调监听函数必须在iframe插入DOM后绑定。

推荐阅读:

JS iFrame加载慢怎么解决

在Web开发中,经常需要动态创建iframe并对其执行相关操作。然而,由于异步加载的特性,后续代码往往在iframe尚未完全渲染时就已执行,导致预期效果无法显示。为确保操作准确性,我们需要等待iframe加载完成后再执行后续逻辑。各大浏览器厂商已提供相应的机制来处理这一需求,具体如下。

IE浏览器的实现方式

IE浏览器

在IE浏览器中,每个DOM元素节点都具备onreadystatechange事件。该事件在元素内容发生变化时触发,例如内容正在载入(loading)、载入完毕(loaded)或载入成功(complete)。此机制需配合readyState属性使用,该属性记录了每次触发时的具体状态。


//先为iframe 添加一个 onreadystatechange
iframe.attachEvent("onreadystatechange", function(){
//此事件在内容没有被载入时候也会被触发,所以我们要判断状态
//有时候会比较怪异 readyState状态会跳过 complete 所以我们loaded状态也要判断
if(iframe.readyState === "complete" || iframe.readyState == "loaded"){
//代码能执行到这里说明已经载入成功完毕了
//要清除掉事件
iframe.detachEvent( "onreadystatechange", arguments.callee);
//这里是回调函数
}
});

非IE浏览器的实现方式

其他浏览器(Firefox, Opera, Chrome等)

在非IE系浏览器(如Firefox、Opera、Chrome等)中,iframe元素拥有onload事件。一旦该事件被触发,即表明内容已加载完毕。


iframe.addEventListener( "load", function(){
//代码能执行到这里说明已经载入成功完毕了
this.removeEventListener( "load", arguments.call, false);
//这里是回调函数
}, false);

跨浏览器兼容综合代码

综合方案


if(iframe.attachEvent){
iframe.attachEvent("onreadystatechange", function() {
//此事件在内容没有被载入时候也会被触发,所以我们要判断状态
//有时候会比较怪异 readyState状态会跳过 complete 所以我们loaded状态也要判断
if (iframe.readyState === "complete" || iframe.readyState == "loaded") {
//代码能执行到这里说明已经载入成功完毕了
//要清除掉事件
iframe.detachEvent("onreadystatechange", arguments.callee);
//这里是回调函数
}
});
}else{
iframe.addEventListener("load", function() {
//代码能执行到这里说明已经载入成功完毕了
this.removeEventListener("load", arguments.call, false);
//这里是回调函数
}, false);
}

注意:上述监听函数必须在iframe被appendChild到body之后绑定,否则事件可能不会被正确触发。

以上内容是小编给大家介绍的JS判断iframe是否加载成功的方法,希望对大家有所帮助!

作者最新文章