iframe 动态onload事件处理方式

时间 2019-11-30

原文原文链接

转自：http://w3help.org/zh-cn/causes/SD9022html

标准参考

关于 HTML 4.01 规范中 BODY 标记的 onload 属性说明： http://www.w3.org/TR/html401/struct/global.html#h-7.5.1浏览器

关于 HTML 4.01 规范中 onload 内在事件说明：http://www.w3.org/TR/html401/interact/scripts.html#adef-onloadapp

关于 DOM Level2 Events 规范中 load 事件说明：http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents函数

问题描述

页面加载完成后会触发 onload 事件，一般下会使用 window.onload 、 document.body.onload、 HTMLIFrame.onload 方法来处理他；可是各浏览器对页面 onload 事件处理方式并不一致，这些方法可能会致使页面加载完成后没法触事件处理函数。spa

形成的影响

window.onload 与 document.body.onload 事件相互关系不明确。orm

IE6 IE7 IE8 中没法经过为属性赋值方式为 IFRAME 元素绑定 load 事件处理函数。htm

受影响的浏览器

IE6 IE7 IE8 Firefox

问题分析

1、window.onload 与 document.body.onload 事件以及 BODY 标签内的内联 onload 事件，三者相互关系不明确

有关这两个事件在 W3C 指定的规范中并无说明其区别，因为 window 对象属于 BOM 范畴没有统一规范可依，各浏览器对其在此处的实现存有差别。对象

在微软的 MSDN 中说明 document.body.onload 属性是 window 的 onload 事件处理程序。其它浏览器厂商并无对此属性作更细致解释。事件

分析如下代码：ip

<button onclick="alert(document.body.onload);">查看本页 document.body.onload 事件</button>
<button onclick="alert(window.onload);">查看本页 window.onload 事件</button>
<button onclick="alert(window.onload===document.body.onload);">查看document.body.onload 事件与 window.onload 事件是否为同一事件</button>
<br />
<script>
document.body.onload = function (){ // 函数 A
  document.getElementById("A").innerHTML = "document.body.onload 被触发";
}
window.onload = function (){ // 函数 B document.getElementById("B").innerHTML = "window.onload 被触发"; } </script> <span id="A" style="background:gold"></span> <span id="B" style="background:gray"></span>

代码中分别对两种 onload 属性赋值了不一样的事件处理函数。其中 window.onload 先于 document.body.onload 被定义。若是他们二者使用的是同一事件处理源，则会发生 window 对象中 onload 事件定义被 body 的事件处理函数所覆盖。

实际上个浏览器运行结果以下：

	IE6 IE7 IE8	Firefox	Chrome Safari Opera
实际运行	window.onload 被触发
document.body.onload 事件函数	函数 B	函数 A	函数 B
window.onload 事件函数	null	函数 B
二者事件处理函数是否一致	Flase	Flase	true

初步能够看出：

在 IE 中 window.onload 事件函数即便定义了，也会是 null ，它的事件处理函数始终是为 document.body.onload 提供的；
在 Firefox 中 document.body.onload 事件不与 window.onload 事件相同，后者事件函数不会覆盖前者；
在 Chrome Safari Opera 中 document.body.onload 事件处理函数被后声明的 window.onload 事件处理函数覆盖。

为了更明确以上猜想，咱们将两个事件处理函数位置对调后再来观察实际效果：

window.onload = function () // 函数 B{
  document.getElementById("B").innerHTML = "window.onload 被触发";
}

document.body.onload = function (){ // 函数 A document.getElementById("A").innerHTML = "document.body.onload 被触发"; }

此次试图使用 document.body.onload 事件处理函数来覆盖 window.onload，实际运行结果以下：

	IE6 IE7 IE8	Firefox	Chrome Safari Opera
实际运行	document.body.onload 被触发	window.onload .onload 被触发	document.body.onload 被触发
document.body.onload 事件函数	函数 A	函数 A	函数 A
window.onload 事件函数	null	函数 B
二者事件处理函数是否一致	Flase	Flase	true

能够看出：

不管如何在 IE 中 window.onload 事件函数即便定义了，也会是 null ，它的事件处理函数始终是为 document.body.onload 提供的。
在 Firefox 中只有 window.onload 事件会触发页面加载完成事件，document.body.onload 只是个由用户扩展的方法，并不触发相应事件处理函数。这也说明了为何仅在 Firefox 浏览器中，二者"事件"函数均被保留。
在 Chrome Safari Opera 中页面加载完成事件由 document.body.onload 和 window.onload 二者的事件处理函数定义顺序有关，后定义的覆盖以前定义的，二者最终会使用同一事件源函数处理事件内容。

在实际应用中 onload 事件还可能被写在 BODY 标签的属性内，而不在脚本标签中定义他的处理函数。此时代码以下：

<script>
window.onload=function(){
  alert("window onload");
}
</script>
<body onload="alert('overridden window onload')">

此用例中首先在脚本标签内为 window.onload 事件附加了处理函数，而后有在 BODY 标签内写入 onload 事件处理代码。若是 BODY 标签内的 onload 事件处理与 window.onload 事件处理不一样，就会弹出两次对话框，而且能够根据对话框出现的顺序判断哪一个 onload 事件处理在前。反之则只会弹出一个对话框，若是仅出现 "window onload" 字样提示就说明 BODY 标签内 onload 属性无效，若是出现 “overridden window onload” 提示就说明 BODY 标签内 onload 事件与 window.onload 事件为同一事件处理机制，后者覆盖了前者。

各浏览器运行结果以下：

	IE6 IE7 IE8 Firefox Chrome Safari Opera
实际运行	”overridden window onload“
二者均表明 window onload 事件	true

可见，在全部浏览器中均将，BODY 标签内的内联 onload 事件处理等同与 window.onload 事件处理。

结合上文说明可知， Firefox 中 BODY 标签内的 onload 事件属性与脚本标记内写入的 document.body.onload 事件并不一致。

2、IE6 IE7 IE8 中没法经过为属性赋值方式为 IFRAME 元素绑定 load 事件处理函数

某些状况下可能须要为 IFRAME 标记动态添加 onload 监听事件，其实现方法有一般有三种：

直接为 HTMLIFrameElement.onload 属性为 IFRAME 标记赋值事件处理函数
使用 HTMLIFrameElement.setAttribute 方法为 IFRAME 标记赋值事件处理函数
使用事件监听方式为 IFRAME 的 onload 事件绑定处理函数

根据 DOM 规范推荐使用第三种处理方式，可是因为规范在不断修正添加中，浏览器开发时可能相应的标准规范并未出现或者并不完善，这致使了各个版本浏览对此问题的实现差别。

如下将依次分析这三种方式在各浏览器内的处理状况。

1.直接为 HTMLIFrameElement.onload 属性为 IFRAME 标记赋值事件处理函数

分析如下代码：

<body>
<div id="msgA">经过 HTMLIFrameElement.onload 属性动态加入事件处理函数的 IFRAME 没有触发 onload 事件。</div>
<div id="msgB">静态 IFRAME 没有触发 onload 事件。</div>
<br />
<script>

function iframeLoadA(){
  document.getElementById("msgA").innerHTML = "经过 HTMLIFrameElement.onload 属性动态加入事件处理函数的 IFRAME 已经触发 onload 事件。";
}
function iframeLoadB(){
  document.getElementById("msgB").innerHTML = "静态 IFRAME 已经触发 onload 事件。";
}

window.onload = function (){
  var iframeB = document.getElementById("ifarmeB");
  var iframeA = document.createElement('iframe');
  iframeA.onload = iframeLoadA;
  document.body.appendChild(iframeA);
}

</script>
<iframe id="ifarmeB" onload="iframeLoadB()"></iframe>
</body>

页面中存在两个 IFRAME 标记，ifrmaeA 标记为动态生成，而且动态为其 onload 属性赋值了加载完成后的处理函数。而 iframeB 标记则是在页面中静态存在的，其 onload 属性对应的事件处理函数已经被固定写入。

运行此代码，在各个浏览器中效果以下：

	IE6 IE7 IE8	Firefox Chrome Safari Opera
HTMLIFrameElement.onload = Function	没有触发 onload 事件	触发 onload 事件
静态 onload 属性定义	触发 onload 事件

可见，在 IE 浏览器中经过 HTMLIFrameElement.onload 属性赋值方式没法响应 IFRAME 标记的 onload 事件。而其余浏览器均支持此写法。

2.使用 HTMLIFrameElement.setAttribute 方法为 IFRAME 标记赋值事件处理函数

将以上代码稍做修改，将 HTMLIFrameElement.onload 赋值语句部分修改成 HTMLIFrameElement.setAttribute方法：

window.onload = function (){
  var iframeB = document.getElementById("ifarmeB");
  var iframeA = document.createElement('iframe');
  iframeA.setAttribute("onload","iframeLoadA()");
  document.body.appendChild(iframeA);
}

此时 ifrmaeA 标记的 onload 属性以及事件处理函数被 DOM 标准方法 setAttribute 写入。

运行此代码，在各个浏览器中效果以下：

	IE6 IE7 IE8(Q)	IE8(S) Firefox Chrome Safari Opera
HTMLIFrameElement.setAttribute	没有触发 onload 事件	触发 onload 事件
静态 onload 属性定义	触发 onload 事件

可见，在 IE 系列浏览器中仅有 IE8(S) 支持经过 setAttribute 方法为 IFRAME 标记写入 onload 属性以及其事件处理函数。而其余浏览器均支持此写法。

3.使用事件监听方式为 IFRAME 的 onload 事件绑定处理函数

再将以上代码稍做修改，使用 DOM 规范中推荐的事件监听绑定方法为 IFRAME 动态加入 onload 事件处理函数：

function addEvent(eventName,element,fn){
  if (element.attachEvent) element.attachEvent("on"+eventName,fn);
  else element.addEventListener(eventName,fn,false);
}
window.onload = function (){
  var iframeB = document.getElementById("ifarmeB");
  var iframeA = document.createElement('iframe');
  addEvent("load",iframeA,iframeLoadA);
  document.body.appendChild(iframeA);
}

代码中为了兼容 IE 私有的事件绑定方式，封装了名为 addEvent 的处理函数，他为 IE 和其余浏览器提供不一样的事件绑定方法，以达到兼容效果。

运行此代码，在各个浏览器中效果以下：

	IE6 IE7 IE8(Q)	IE8(S) Firefox Chrome Safari Opera
onload 事件监听绑定	触发 onload 事件
静态 onload 属性定义	触发 onload 事件

此时全部浏览器中为 IFRAME 标记动态绑定的 onload 事件处理方法均生效。

综合以上三种常见状况能够得出结论，除 IE 之外的浏览器均支持对以上三种动态定义 onload 事件处理函数的方法，而全部 IE 系列浏览器对 HTMLIFrameElement.onload 属性的赋值不被支持，他们能够经过 DOM 标准方法 setAttribute 来为 HTMLIFrameElement 类型元素设置 onload 属性，可是因为 IE8 如下版本对 setAttribute 方法支持有限，致使仅 IE8(S) 下生效。最终 IE 浏览器只能经过事件监听方式为 HTMLIFrameElement 类型元素绑定 onload 事件处理函数。

解决方案

统一为 window 对象的 onload 事件绑定函数，避免在 Firefox 中产生 document.body.onload 事件理解歧义。
统一使用 DOM 规范的事件监听方法（或 IE 专有事件绑定方法）为 IFRAME 标记绑定 onload 事件处理函数。