2009-9-22 上午 - JS/Ajax/AS/Flex - - -   

一般来说，我们判断 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);

几点补充说明：

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

这篇文章发表2009年9月22日 上午 11:06，并被分类于JS/Ajax/AS/Flex。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论， 也可以发表您的评论，或者在您自己的网站中 引用（trackback） 该篇日志。



共有34 条评论

  1. 1. 头像 keshin 2009年9月22日 下午 1:41 ₪

    IE 支持 iframe 的 onload 事件，不过是隐形的，需要通过 attachEvent 来注册。
    受教

  2. 2. 头像 cc 2009年9月22日 下午 3:06 ₪

    在ff的oninput也是不能直接dom.oninput不知为什么呢

  3. 3. 头像 光 2009年9月22日 下午 3:09 ₪

    good!!

  4. 4. 头像 thinker_creator 2009年9月22日 下午 7:10 ₪

    这篇文章好, 我就觉得你应该多写点文章, 让咱也多学点, 更新频率忒低了!

  5. 5. 头像 vapour 2009年9月23日 上午 8:13 ₪

    请教下 /*@cc_on!@*/0 什么意思。

  6. 6. 头像 怿飞 2009年9月23日 下午 1:23 ₪

    @thinker_creator 呵呵，精力有限，只能做到每月的更新。

  7. 7. 头像 怿飞 2009年9月23日 下午 1:24 ₪

    @vapour 仅仅是一个判断浏览器的hack，看的时候知道就行，可以过滤。

  8. 8. 头像 崔凯 2009年9月24日 下午 1:29 ₪

    技术就那么多，写来写去的……

    怿飞 每月更新 已经很强了，总是能发现新东西……

  9. 9. 头像 松鼠 2009年9月24日 下午 1:42 ₪

    readystatechange 事件相对于 load 事件有一些潜在的问题: 想详细了解一下都有哪些潜在问题

  10. 10. 头像 tn requin 2009年9月25日 上午 10:38 ₪

    iframe 不提倡用啊。。。

  11. 11. 头像 成都网站建设 2009年9月25日 下午 5:53 ₪

    过了阵时间我都要过来看看,都能学到不少东西,支持!

  12. 12. 头像 letle 2009年9月29日 下午 2:18 ₪

    不错的内容

  13. 13. 头像 vêtements femmes 2009年10月5日 下午 2:22 ₪

    看了一下，学的东西还真的不少

  14. 14. 头像 aksoft 2009年10月10日 下午 12:59 ₪

    这个挺实用～

  15. 15. 头像 三国演义博客 2009年10月12日 上午 1:11 ₪

    很好很实用，我也是学习者，有时间会来看。

  16. 16. 头像 kinstrace 2009年10月12日 上午 9:40 ₪

    今天又来学习了，拜读佳作！

  17. 17. 头像 Jonllen 2009年10月22日 上午 11:20 ₪

    原来ie里iframe能通过attachEvent注册onload事件,受教了。

  18. 18. 头像 晴枫 2009年10月27日 上午 9:40 ₪

    学习了~

  19. 19. 头像 qiaojianwei 2009年10月27日 下午 5:28 ₪

    我想问下，能不能获取iframe装载的那个页面的高度，继而来调整iframe所在的页面的高度？另外想问下所谓的跨域问题？比如我从一个JSP页面里用iframe加载了另外一个服务器上的html也没？但是我写的JS没有执行？

  20. 20. 头像 Frusop 2009年11月12日 上午 11:26 ₪

    好地方，常来学习下。。。

  21. 21. 头像 xx 2009年11月22日 下午 9:15 ₪

    第二种方法比第一种方法更完美，因为 readystatechange 事件相对于 load 事件有一些潜在的问题。

    到底是什么问题呢
    没说清楚啊

  22. 22. cloudgamer 2009年12月23日 上午 10:09 ₪

    简便无刷新文件上传系统…

    之前写过一个仿163网盘无刷新多文件上传系统，已经对无刷新上传文件的原理做了详细的分析。
    而这次的系统主要是针对单个file控件的，便携版，使用更简单，还有更深入的分析。
    ps：flash实现的效……

  23. 23. Silentash-默尘 » Iframe Tips ABC 2009年12月25日 下午 3:01 ₪

    [...] 姑且算是牛D吧 =.=!牛C：iframe.onload关于 onload 这点大家可以参考怿飞师父的文章：判断 iframe 是否加载完成的完美方法，在此纯引用一次代码： [...]

  24. 24. 头像 simaopig 2009年12月30日 下午 5:11 ₪

    最后的说明很重要。我真的不知道ie得用attachEvent来处理ifarame的onload。。长知识了。

  25. 25. Iframe Tips ABC - 迪娜进行时 2010年3月26日 下午 4:50 ₪

    [...] 关于 onload 这点大家可以参考怿飞师父的文章：判断 iframe 是否加载完成的完美方法，在此纯引用一次代码： [...]

  26. 26. 头像 iframe临时加载 2010年6月8日 下午 1:49 ₪

    关于 commons上传图片怎么弄

  27. 27. 简便无刷新文件上传系统 - Web开发常见问题 - 简便无刷新文件上传系统 Web 开发 JavaScript 简便无刷新文件上传系统 Web 开发 JavaScript 简便无刷新文件上传系统 Web 开发 JavaScript 简便无刷新文件上传 2010年6月11日 下午 4:47 ₪

    [...] 为了能在文件上传完成后执行回调函数，会在iframe的onload中执行_finish函数：var finish = this._fFINISH = $$F.bind(this._finish, this);if ( $$B.ie ) { iframe.attachEvent( "onload", finish );} else { iframe.onload = $$B.opera ? function(){ this.onload = finish; } : finish;}在ie需要用attachEvent来绑定onload，因为在ie中直接设置onload是无效的。除了用attachEvent还可以用onreadystatechange代替。至于原因我也不清楚，详细参考“判断 iframe 是否加载完成的完美方法”。 [...]

  28. 28. 头像 zhouqicf 2010年7月2日 上午 9:51 ₪

    IE下直接“note.onload = function(){}”也可以注册的，难道这样促发的时间不准确？

  29. 29. 头像 乘风 2010年7月10日 下午 9:12 ₪

    我拿后来那段代码发现有问题，还是用readystatechange比较好吧
    因为用onload的话，iframe里调用的页面如果存在jscript错误，就失去作用了，原因不知道，但效果是如此。而用readystatechange就没有这个问题

  30. 30. GodSon 2011年5月22日 上午 12:32 ₪

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

    var iframe = document.createElement("iframe"); iframe.src = "http://www.planabc.net"; if (iframe.attachEvent){     iframe.attachEvent("onload", function(){         alert("Local iframe is …

  31. 31. 结合iframe，window.name实现跨域访问 | 工夫茶 2011年6月19日 上午 3:02 ₪

    [...] 使用 window.name 解决跨域问题 判断 iframe 是否加载完成的完美方法 自己用纯js也模仿着实现了一个 [...]

  32. 32. 头像 applezqp 2011年7月20日 下午 3:26 ₪

    “readystatechange 事件相对于 load 事件有一些潜在的问题”，到底是存在什么问题呢？

  33. 33. Simple no refresh file upload system 2011年8月2日 下午 2:49 ₪

    [...] In ie need to use attachEvent to binding onload, because in ie directly set onload is invalid.In addition to use attachEvent can also use the onreadystatechange instead.As for the reason I also not clear, detailed reference"Judge whether iframe loaded perfect method”。 [...]

  34. 34. 头像 胡尐睿丶 2011年9月20日 上午 1:07 ₪

    直接用jq里的load不行么？

发表评论

(必填)

(必填，会为您保密)

评论仅支持“a、abbr、strong、em、blockquote、code”几个简单的标签