IFrame_onload_事件

概述onload事件在frame或者iframe载入完成后被触发。语法onload=JavaScriptCode标准参考关于HTML4.01规范中BODY标记的onload属性说明：关于HTML4.01规范中onload内在事件说明：关于DOMLevel2Events规范中load事件说明：常见问题描述页面加载完成后会触发onload事件，通常下会使用window.onload、document.body.onload、HTMLIFrame.onload方法来处理他；但是各浏览器对页面onload事件处理方式并不一致，这些方法可能会导致页面加载完成后无法触事件处理函数。造成的影响window.onload与document.body.onload事件相互关系不明确。IE6IE7IE8中无法通过为属性赋值方式为IFRAME元素绑定load事件处理函数。受影响的浏览器IE6IE7IE8Firefox问题分析一、window.onload与document.body.onload事件以及BODY标签内的内联onload事件，三者相互关系不明确有关这两个事件在W3C指定的规范中并没有说明其区别，由于window对象属于BOM范畴没有统一规范可依，各浏览器对其在此处的实现存有差异。在微软的MSDN中说明document.body.onload属性是window的onload事件处理程序。其它浏览器厂商并没有对此属性做更细致解释。分析以下代码：buttononclick=alert(document.body.onload);查看本页document.body.onload事件/buttonbuttononclick=alert(window.onload);查看本页window.onload事件/buttonbuttononclick=alert(window.onload===document.body.onload);查看document.body.onload事件与window.onload事件是否为同一事件/buttonbr/scriptdocument.body.onload=function(){//函数Adocument.getElementById(A).innerHTML=document.body.onload被触发;}window.onload=function(){//函数Bdocument.getElementById(B).innerHTML=window.onload被触发;}/scriptspanid=Astyle=background:gold/spanspanid=Bstyle=background:gray/span代码中分别对两种onload属性赋值了不同的事件处理函数。其中window.onload先于document.body.onload被定义。如果他们两者使用的是同一事件处理源，则会发生window对象中onload事件定义被body的事件处理函数所覆盖。实际上个浏览器运行结果如下：IE6IE7IE8FirefoxChromeSafariOpera实际运行window.onload被触发document.body.onload事件函数函数B函数A函数Bwindow.onload事件函数null函数B两者事件处理函数是否一致FlaseFlasetrue初步可以看出：在IE中window.onload事件函数即使定义了，也会是null，它的事件处理函数始终是为document.body.onload提供的；在Firefox中document.body.onload事件不与window.onload事件相同，后者事件函数不会覆盖前者；在ChromeSafariOpera中document.body.onload事件处理函数被后声明的window.onload事件处理函数覆盖。为了更明确以上猜测，我们将两个事件处理函数位置对调后再来观察实际效果：window.onload=function()//函数B{document.getElementById(B).innerHTML=window.onload被触发;}document.body.onload=function(){//函数Adocument.getElementById(A).innerHTML=document.body.onload被触发;}这次试图使用document.body.onload事件处理函数来覆盖window.onload，实际运行结果如下：IE6IE7IE8FirefoxChromeSafariOpera实际运行document.body.onload被触发window.onload.onload被触发document.body.onload被触发document.body.onload事件函数函数A函数A函数Awindow.onload事件函数null函数B两者事件处理函数是否一致FlaseFlasetrue可以看出：无论如何在IE中window.onload事件函数即使定义了，也会是null，它的事件处理函数始终是为document.body.onload提供的。在Firefox中只有window.onload事件会触发页面加载完成事件，document.body.onload只是个由用户扩展的方法，并不触发相应事件处理函数。这也说明了为什么仅在Firefox浏览器中，两者事件函数均被保留。在ChromeSafariOpera中页面加载完成事件由document.body.onload和window.onload两者的事件处理函数定义顺序有关，后定义的覆盖之前定义的，两者最终会使用同一事件源函数处理事件内容。在实际应用中onload事件还可能被写在BODY标签的属性内，而不在脚本标签中定义他的处理函数。此时代码如下：scriptwindow.onload=function(){alert(windowonload);}/scriptbodyonload=alert('overriddenwindowonload')此用例中首先在脚本标签内为window.onload事件附加了处理函数，然后有在BODY标签内写入onload事件处理代码。如果BODY标签内的onload事件处理与window.onload事件处理不同，就会弹出两次对话框，并且可以根据对话框出现的顺序判断哪个onload事件处理在前。反之则只会弹出一个对话框，如果仅出现windowonload字样提示就说明BODY标签内onload属性无效，如果出现“overriddenwindowonload”提示就说明BODY标签内onload事件与window.onload事件为同一事件处理机制，后者覆盖了前者。各浏览器运行结果如下：IE6IE7IE8FirefoxChromeSafariOpera实际运行”overriddenwindowonload“两者均代表windowonload事件true可见，在所有浏览器中均将，BODY标签内的内联onload事件处理等同与window.onload事件处理。结合上文说明可知，Firefox中BODY标签内的onload事件属性与脚本标记内写入的document.body.onload事件并不一致。二、IE6IE7IE8中无法通过为属性赋值方式为IFRAME元素绑定load事件处理函数某些情况下可能需要为IFRAME标记动态添加onload监听事件，其实现方法有通常有三种：1.直接为HTMLIFrameElement.onload属性为IFRAME标记赋值事件处理函数2.使用HTMLIFrameElement.setAttribute方法为IFRAME标记赋值事件处理函数3.使用事件监听方式为IFRAME的onload事件绑定处理函数根据DOM规范推荐使用第三种处理方式，但是由于规范在不断修正添加中，浏览器开发时可能相应的标准规范并未出现或者并不完善，这导致了各个版本浏览对此问题的实现差异。以下将依次分析这三种方式在各浏览器内的处理情况。1.直接为HTMLIFrameElement.onload属性为IFRAME标记赋值事件处理函数分析以下代码：bodydivid=msgA通过HTMLIFrameElement.onload属性动态加入事件处理函数的IFRAME没有触发onload事件。/divdivid=msgB静态IFRAME没有触发onload事件。/divbr/scriptfunctioniframeLoadA(){document.getElementById(msgA).innerHTML=通过HTMLIFrameElement.onload属性动态加入事件处理函数的IFRAME已经触发onload事件。;}functioniframeLoadB(){document.getElementById(msgB).innerHTML=静态IFRAME已经触发onload事件。;}window.onload=function(){variframeB=document.getElementById(ifarmeB);variframeA=document.createElement('iframe');iframeA.onload=iframeLoadA;document.body.appendChild(iframeA);}/scriptiframeid=ifarmeBonload=iframeLoadB()/iframe/body页面中存在两个IFRAME标记，ifrmaeA标记为动态生成，并且动态为其onload属性赋值了加载完成后的处理函数。而iframeB标记则是在页面中静态存在的，其onload属性对应的事件处理函数已经被固定写入。运行此代码，在各个浏览器中效果如下：IE6IE7IE8FirefoxChromeSafariOperaHTMLIFrameElement.onload=Function没有触发onload事件触发onload事件静态onload属性定义触发onload事件可见，在IE浏览器中通过HTMLIFrameElement.onload属性赋值方式无法响应IFRAME标记的onload事件。而其他浏览器均支持此写法。2.使用HTMLIFrameElement.setAttribute方法为IFRAME标记赋值事件处理函数将以上代码稍作修改，将HTMLIFrameElement.onload赋值语句部分修改为HTMLIFrameElement.setAttribute方法：window.onload=function(){variframeB=document.getElementById(ifarmeB);variframeA=document.createElement('iframe');iframeA.setAttribute(onload,iframeLoadA());document.body.appendChild(iframeA);}此时ifrmaeA标记的onload属性以及事件处理函数被DOM标准方法setAttribute写入。运行此代码，在各个浏览器中效果如下：IE6IE7IE8(Q)IE8(S)FirefoxChromeSaf