夏日博客

A-A+

IE下iframe的onload事件用法介绍

2016年01月14日 前端设计 暂无评论 阅读 6 views 次

文章详细的介绍了关于iframe的onload事件在ie中的一些用法介绍，有需要了解的朋友可参考一下。

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

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

这里感觉说的并不是完全准确，开始给我造成了很大的困扰。看其代码才明白，真正意义上来讲IE在创建一个新的iframe时的onload方法需要使用attachEvent来绑定，而原来就存在的iframe的onload方法，则可以直接绑定。
说的有些乱，大家看代码，一看便知：

  1. <iframe id='google'></iframe>  
  2. <script type='text/javascript'>  
  3. document.getElementById('google').src='http://www.111cn.net/';  
  4. document.getElementById('google').onload = function(){  
  5. alert ('I am google frame, now loaded');  
  6. }  
  7. </script>  

在这里，也把原文提到的”判断 iframe 是否加载完成的完美方法”原文摘录至此,代码如下:

  1. var iframe = document.createElement("iframe");  
  2. iframe.src = "https://www.xiariboke.net";  
  3. if (iframe.attachEvent){  
  4.     iframe.attachEvent("onload", function(){  
  5.         alert("Local iframe is now loaded.");  
  6.     });  
  7. } else {  
  8.     iframe.onload = function(){  
  9.         alert("Local iframe is now loaded.");  
  10.     };  
  11. }  
  12. document.body.appendChild(iframe);  

IFRAME ONLOAD 事件

在Firefox/Opera/Safari中，直接使用frame元素的onload事件即可,代码如下:

  1. document.getElementById(“iframe1”).onload=function(){  
  2. //your codes here.  
  3. };  

只可惜它在IE下经常无效，因为在IE下它最多只能被激活一次，而且无论你有多少个iframe，被激活的也只能是最后一个的。

原因:

这些事件是在IFRAME内的文档对象模型中激活的，而不是父页面的。在IFRAME加载完毕的时候，这个事件就被激活了，而且ReadyState已经是“完成”状态。所以你无法通过这个事件来查检一个IFRAME是否加载完毕。
为了得到更好的表现，我们再稍稍研究一个问题：IFRAME递归。

3.IFRAME 递归

在处理IFRAME时，浏览器应该有一个基本规则，那就是防止递归，防止页面无限的自我加载，使客户端设备崩溃。事实上，文中出现的几个浏览器均做到这点，只是不同的浏览器有不同的处理方式。

请分别尝试以下代码：

  1. <iframe src=”” onload=”finish()” name=”iframe1”></iframe>  
  2. <iframe src=”#hashonly” onload=”finish()” name=”iframe2”></iframe>  
  3. <iframe src=”?search” onload=”finish()” name=”iframe3”></iframe>  
  4. <iframe src=”http://anotherPage.com” onload=”finish()” name=”iframe4”></iframe>  

执行的结果是，在父页面加载时，上面的iframe onload函数在IE/Opera/Safari中均会被激活，Firefox对第二个没有反应。这主要因为他们在防止递归方面的处理是不同的。

对于#hashonly和?search这样的URL，浏览器会解释为页面本身。但hash和search的不同之处是，改变 search可以组成新的源，而改变hash不会。通常地，浏览器一遇到同源的iframe内页即会停止加载，但Safari却会加载多一次。

假如把finish()函数写成如下：

var finsh=function(){alert(”onload from :”+this.src);}

运行时分别弹出的消息弹出框的次数如下：

  1. ifm/brw:    IE    |    Firefox    |    Opera    |    Safari iframe1:    1     |       1       |      1      |      0 iframe2:    1     |       0       |      1      |      1 iframe3:    2     |       1       |      2      |      2 iframe4:    1     |       1       |      1      |      1  

再结合页面所呈现的内容，可得看出这些浏览器在处理递归问题上的一些细则：

•Firefox 不会在iframe中加载任何东西和激活onload事件（可能是任何事件）

•IE和Opera不会在iframe中加载页面，但会激活onload事件。

•Safari（windows版本）会在iframe中加载页面一次且仅仅一次，并会激活onlaod事件且仅激活依附在父页面上那个iframe的onload事件。

关于本节，如果仅把iframe用于页面嵌套，那意义不大；如果用于动态加载/呈现内页，或者用于良好用户体验的form target表单提交处理（不是Ajax），并且要求较高的浏览器兼容性时，作用才会显示出来。根据本节结果，为了提高兼容性，最好事先把iframe指向一个空页面——blank.html，因为它在4种浏览器中的表现是一样的。如果不想事先加载页面，那就得花多点心思去判断浏览器类型了

标签：

给我留言