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

最新推荐文章于 2025-08-15 22:56:20 发布

zhangyanhu602

最新推荐文章于 2025-08-15 22:56:20 发布

阅读量165

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： iframe javascript ViewUI

本文链接：https://blog.youkuaiyun.com/zhangyanhu602/article/details/84040947

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何判断iframe是否加载完成，采用的方法与判断JavaScript文件加载完成类似。通过创建iframe元素并设置src属性，然后使用onload或readystatechange事件监听加载状态。此外，文章还分享了一个改进的方法，该方法在不同浏览器环境下都能正确判断iframe加载完成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般来说，我们判断 iframe 是否加载完成其实与判断 JavaScript 文件是否加载完成采用的方法很类似：

var iframe = document.createElement("iframe");  

iframe.src = "http://www.planabc.net";  

 if (!/*@cc_on!@*/0) { //if not IE  

     iframe.onload = function(){  

         alert("Local iframe is now loaded.");  

     };  

} else {  

     iframe.onreadystatechange = function(){  

        if (iframe.readyState == "complete"){  

             alert("Local iframe is now loaded.");  

        }  

   };  

}  

    

document.body.appendChild(iframe);

最近， Nicholas C. Zakas 文章《Iframes, onload, and document.domain》的评论中 Christopher 提供了一个新的判断方法（很完美）：

var iframe = document.createElement("iframe");  

iframe.src = "http://www.planabc.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);