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 事件都会被触发。
  • 其他情况各个浏览器都有所不同。

解决方案

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

时间: 2024-08-12 00:10:40

10、网页制作Dreamweaver(扩展:各浏览器对 onunload 事件的支持与触发条件实现有差异)的相关文章

各浏览器对 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/ms5369

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

标准参考 无. 问题描述 一般情况下,onbeforeunload 事件处理函数内会写入一些提示性语句,当用户的浏览器跳转到其他页面时,用来提醒用户当前页面将要跳转,请用户决定是否观看新页面.或者在 onbeforeunload 事件内处理一些业务逻辑,在浏览器跳转到新页面之前 ,执行一些业务逻辑,如保存用户浏览信息等. 简单的说这个事件应仅在页面 URL 发生变化时触发,但是在 IE 中 使用 JavaScript 伪协议执行脚本程序时,也会触发 onbeforeunload 事件. 造成的影

11、网页制作Dreamweaver(补充:JS零碎知识点&amp;&amp;正则表达式)

JS知识点 回车符/r和换行符/n的区别:/r 相当于enter,是段落与段落之间的区别, /n 相当于shift+enter,是行与行之间距离,比较小 几种window操作方法: 1.获取当前窗口大小并打印: var height=window.innerHeight; var width = window.innerWidth; document.write("<br/>"+"height"+height+","+"wi

3、网页制作Dreamweaver(表单form)

表单form (虚线不显示) 1.写法: <form id="form1" name="form1" method="post" action=""> </form> 1.  解释 name.id自定义,用于寻找此块内容 3.内容 (1)文本框:可以设置width,height  <label for="denglu">姓名</label>          

2、网页制作Dreamweaver(图片热点、frameset框架)

图片热点 1.方法: <img  usemap="名字"> <map name="名字"> <area shape="rect" coords="170,170,260,260" href="http://www.baidu.com" /> </map> 2.解释 rec:矩形 circle:圆形 poly:多边形 coords坐标 框架frameset 将多

6、网页制作Dreamweaver(HTML结构--dom操作)

一.基本语法:数据类型(字符串,小数,整数,布尔,时间) var, var s = "3.14"; var n = parseFloat(s); ; s += 5; var d = parseInt(s); isNaN(字符串):判断是否是数字模样的字符串:是-false: 不是-true 运算符:四大类 表达式: 语句:三大类(顺序,分支,循环) 分支:if(){}; if...else...;if...else if...else if ......else;if嵌套 循环:穷举,

5、网页制作Dreamweaver(JS的初步运用)

JAVASCRIPT *放在头部也可以读取(最先读取头部) 表单提交时会自动刷新网页,最好关掉 写法: 1.输出 <script> document.write("hello world"); </script> 2.按钮运用 <input name="alert" value="alert"type="button" onclick='alert("这是触发事件")'/>

9、网页制作Dreamweaver(jQuery基础:事件)

事件 定义:即当HTML中发生某些事(点击.鼠标移过等)的时候调用的方法 $(selector).action() 事件的触发有两种方法: 1.直接将发生的事写在<javascript>中 1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 $("button").click(function(){ 4 $("p").hide(); 5 }

网页制作之JavaScript部分3--事件及事件传输方式(函数调用 练习题 )重要---持续更新中

一. 事件:说白了就是调用函数的一种方式.它包括:事件源.事件数据.事件处理程序. JS事件 1.js事件通常和函数结合来使用,这样可以通过发生的事件来驱动函数的执行,从而引起html出现不同的效果. 2.属性(当这些事件的属性发生改变时,会触发function{}的函数): 1)onabort:当图像加载被中断时,会引发function内的函数. 2)onbur:当元素失去焦点: 3)onfocus:当元素获得焦点,获得焦点,就是文本框里面的内容修改 4)onclick:鼠标点击某个对象 5)