SD9026: 各浏览器对 onunload 事件的支持与触发条件实现有差异

标准参考•
问题描述•
造成的影响•
受影响的浏览器•
问题分析•
解决方案•
参见

作者：段立新

标准参考

在 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方法	事件被触发	事件被触发	事件被触发	不支持此方法¹	不支持此方法¹	不支持此方法¹	事件被触发
调用 document.write方法	事件被触发	事件被触发	事件被触发	事件未触发	事件未触发	事件未触发	事件未触发
调用 document.open方法	事件被触发	事件被触发	事件被触发	事件未触发	事件未触发	事件未触发	事件未触发
调用 document.close方法	事件未触发	事件未触发	事件未触发	事件未触发	事件未触发	事件未触发	事件未触发
调用 window.open方法，窗口名称设置值为 _self	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发
调用 window.navigate	事件被触发	事件被触发	事件被触发	不支持此方法²	不支持此方法²	不支持此方法²	事件未触发
调用 NavigateAndFind方法	事件被触发	事件被触发	事件被触发	不支持此方法³	不支持此方法³	不支持此方法³	不支持此方法³
调用 location.replace 方法	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件未触发
调用 location.reload 方法	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件未触发
指定一个 location.href 属性的新值	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发
使用 submit 按键提交表单	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发
调用 form.submit 方法	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发	事件被触发
调用 javascipt: 伪协议	事件未触发	事件未触发	事件未触发	事件未触发	事件未触发	事件未触发	事件未触发
调用 mailto: 伪协议	事件未触发	事件未触发	事件未触发	事件未触发	事件未触发	事件未触发	事件未触发
调用自定义伪协议	事件被触发	事件未触发	事件未触发	事件未触发	事件未触发	事件被触发	事件未触发

【注1】：直接调用链接元素的 click 方法模拟鼠标点击事件，只有 IE 和 Opera 支持。

【注2】：使用 window.navigate 方法导航网页仅被 IE Opera 支持，可参考 MSDN 原文：navigate Method。

【注3】： NavigateAndFind 方法处于 window.external 对象中，external 对象也仅 IE 支持，可参考 MSDN 原文：NavigateAndFind Method 和本站文章 BT9012: IE 的 external 对象提供的方法是 IE 特有的。

结合汇总表可以看出：

点击一个链接到新页面、调用 window.open方法窗口名称设置值为 _self、指定一个 location.href 属性的新值、使用 submit 按键提交表单、调用 form.submit 方法在各浏览器下 onunload 事件都会被触发。
其他情况各个浏览器都有所不同。

解决方案

各浏览器的支持以及事件触发条件差异较多，需谨慎使用。

参见

知识库

测试环境

操作系统版本:	Windows 7 Ultimate build 7600
浏览器版本:	IE6 IE7 IE8 Firefox 3.6.10 Chrome 7.0.552.0 dev Safari 5.0.2 Opera 10.63
测试页面:	onunload.html
本文更新时间:	2010-10-14