10、网页制作Dreamweaver（扩展：各浏览器对 onunload 事件的支持与触发条件实现有差异）

浏览数：31 / 时间：2015年06月09日

标准参考

在 HTML 4.01 规范中关于 onunload 事件的描述是：当 document 从 window 中移除时，触发 onunload 事件。

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

MSDN 中关于 onunload 事件的描述：http://msdn.microsoft.com/en-us/library/ms536973(VS.85).aspx 。

Mozilla developer center 中关于 onunload 事件的描述：https://developer.mozilla.org/en/DOM/window.onunload 。

问题描述

当 document 从 window 中移除，将触发 onunload 事件，各浏览器对 onunload 事件的支持与触发条件实现有差异。

造成的影响

各浏览器对 onunload 事件的支持与触发条件实现有差异，所以在 onunload 事件中书写的方法可能在一些浏览器中没有被执行。

受影响的浏览器

所有浏览器

问题分析

根据 MSDN 中描述，IE 的 onunload 事件可由以下这些条件触发：

关闭当前浏览器窗口。
导航到另一个进入一个新的地址或选择一个喜欢的位置。
单击后退，前进，刷新，或主页按钮。
点击一个链接到新页面。
调用 anchor.click方法。
调用 document.write方法。
调用 document.open方法。
调用 document.close方法。
调用 window.close方法。
调用 window.open方法，窗口名称设置值为 _self。
调用 window.navigate 或 NavigateAndFind方法。
调用 location.replace 方法。
调用 location.reload 方法。
指定一个 location.href 属性的新值。
使用 submit 按键提交表单，或调用 form.submit 方法。

在这些触发条件中绝大多数都始页面产生了跳转，但还缺少一些一种常见情况说明，即页面 URL 可能发生了变化但没有产生跳转。比如 "javascipt:" "mailto:" 等常见的浏览器内置伪协议，以及由第三方或用户自定义的为协议时，页面并不跳转，而是根据伪协议执行指定的行为。这个情况应加入到触发条件中。

根据以上所有这些触发条件，我们构建如下代码来检测各浏览器对 onunload 事件的支持程度与触发条件：

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>
<body onunload="alert(‘执行 onunload‘);">
请手工关闭当前浏览器窗口。<br/>
请手工在地址栏输入其他页面地址或从收藏夹、历史记录中将页面导航其他站点。<br/>
请手工单击后退，前进，刷新，或主页按钮。<br/>
<a href="http://www.google.com" id="A">点击一个链接到新页面</a><br />
<button onclick="document.getElementById(‘A‘).click()">调用 anchor.click 方法</button><br />
<button onclick="document.write(‘A‘)">调用 document.write 方法</button><br />
<button onclick="document.open()">调用 document.open 方法</button><br />
<button onclick="document.close()">调用 document.close 方法</button><br />
<button onclick="window.open(‘http://www.google.com‘,‘_self‘)">调用 window.open方法，窗口名称设置值为 _self</button><br />
<button onclick="try{window.navigate(‘http://www.google.com‘)}catch(e){alert(‘不支持此方法‘)}">调用 window.navigate 方法</button><br />
<button onclick="try{window.external.NavigateAndFind(‘http://www.google.com‘,‘‘,‘‘)}catch(e){alert(‘不支持此方法‘)}">调用 NavigateAndFind 方法</button><br />
<button onclick="location.replace(‘http://www.google.com‘)">调用 location.replace 方法</button><br />
<button onclick="location.reload()">调用 location.reload 方法</button><br />
<button onclick="location.href=‘http://www.google.com‘">指定一个 location.href 属性的新值</button><br />
<form action="http://www.google.com" id="B">
<input type="submit" value="提交具有 action 属性的一个表单">
</form>
<button onclick="document.getElementById(‘B‘).submit()">调用 form.submit 方法</button><br />
<a href="javascript:">调用 javascipt: 伪协议</a><br />
<a href="mailto:">调用 mailto: 伪协议</a><br />
<a href="custom:">调用自定义伪协议</a>
</body>
</html>

执行结果汇总入表：

	IE6	IE7	IE8	Firefox	Chrome	Safari	Opera
关闭当前浏览器窗口	事件被触发	事件未触发	事件未触发	事件被触发	事件被触发	事件未触发	事件未触发
导航到另一个进入一个新的地址或选择一个喜欢的位置	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件未触发
单击后退，前进，刷新，或主页按钮	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件未触发
点击一个链接到新页面	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发
调用 anchor.click方法	事件被触发	事件被触发	事件被触发	不支持此方法1	不支持此方法1	不支持此方法1	事件被触发
调用 document.write方法	事件被触发	事件被触发	事件被触发	事件未触发	事件未触发	事件未触发	事件未触发
调用 document.open方法	事件被触发	事件被触发	事件被触发	事件未触发	事件未触发	事件未触发	事件未触发
调用 document.close方法	事件未触发	事件未触发	事件未触发	事件未触发	事件未触发	事件未触发	事件未触发
调用 window.open方法，窗口名称设置值为 _self	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发
调用 window.navigate	事件被触发	事件被触发	事件被触发	不支持此方法2	不支持此方法2	不支持此方法2	事件未触发
调用 NavigateAndFind方法	事件被触发	事件被触发	事件被触发	不支持此方法3	不支持此方法3	不支持此方法3	不支持此方法3
调用 location.replace 方法	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件未触发
调用 location.reload 方法	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件未触发
指定一个 location.href 属性的新值	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发
使用 submit 按键提交表单	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发
调用 form.submit 方法	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发
调用 javascipt: 伪协议	事件未触发	事件未触发	事件未触发	事件未触发	事件未触发	事件未触发	事件未触发
调用 mailto: 伪协议	事件未触发	事件未触发	事件未触发	事件未触发	事件未触发	事件未触发	事件未触发
调用自定义伪协议	事件被触发	事件未触发	事件未触发	事件未触发	事件未触发	事件被触发	事件未触发