标准参考
在 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: 伪协议 | 事件未触发 | 事件未触发 | 事件未触发 | 事件未触发 | 事件未触发 | 事件未触发 | 事件未触发 |
调用自定义伪协议 | 事件被触发 | 事件未触发 | 事件未触发 | 事件未触发 | 事件未触发 | 事件被触发 | 事件未触发 |
【注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 事件都会被触发。
- 其他情况各个浏览器都有所不同。
解决方案
各浏览器的支持以及事件触发条件差异较多,需谨慎使用。