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

时间：2021-11-04 18:47:07

10、网页制作Dreamweaver（扩展：各浏览器对 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方法 事件被触发 事件被触发 事件被触发 不支持此方法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 事件都会被触发。
  • 其他情况各个浏览器都有所不同。

解决方案

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

相关文章