这篇文章主要介绍了基于 JS 判断 iframe 是否加载成功的方法【多种浏览器】的相关资料, 需要的朋友可以参考下

Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如 Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

推荐阅读：

在项目中经常要动态添加 iframe，然后再对添加的 iframe 进行相关操作，而往往 iframe 还没添加完呢，后边的代码就已经执行完了，所以有些你写的东西根本没有显示出来。这时，我们就要考虑是否可以等 iframe 加载完后再执行后边的操作，当然，各种浏览器早就为我们考虑到啦，看下面：

ie 浏览器

IE 的每个 elem 节点都会拥有一个 onreadystatechange 事件，这个事件每次在 elem 内容发送变化的时候触发，比如内容正在载入 loading 会触发，内容载入完毕 loaded 会触发，内容载入成功 complete 会触发，这个函数还需要配合 readyState，这是 ie 上每个 elem 都拥有的属性，用来查看每次触发时候的状态。

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

其他浏览器（Firefox,Opera,chrome 等 ）

在其他非 IE 的浏览器上 Firefox,Opera,chrome 等 iframe 都会拥有一个 onload 事件，此事件只要触发就说名内容已经加载完毕。

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

综合一下

1. if (iframe.attachEvent) {
2. iframe.attachEvent(“onreadystatechange”,
3. function() {
4. //此事件在内容没有被载入时候也会被触发，所以我们要判断状态
5. //有时候会比较怪异 readyState状态会跳过 complete 所以我们loaded状态也要判断
6. if (iframe.readyState === “complete” || iframe.readyState == “loaded”) {
7. //代码能执行到这里说明已经载入成功完毕了
8. //要清除掉事件
9. iframe.detachEvent(“onreadystatechange”, arguments.callee);
10. //这里是回调函数
11. }
12. });
13. } else {
14. iframe.addEventListener(“load”,
15. function() {
16. //代码能执行到这里说明已经载入成功完毕了
17. this.removeEventListener(“load”, arguments.call, false);
18. //这里是回调函数
19. },
20. false);
21. }

注意：上面的函数必须放在 iframe 被 appendChild 到 body 后，否则不会被触发

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