JS之onunload、onbeforeunload事件详解
2018-06-24 00:41:17来源：未知 阅读 ()
简介
onunload，onbeforeunload都是在刷新或关闭时调用，可以在<script>脚本中通过 window.onunload来调用。区别在于onbeforeunload在onunload之前执行，它还可 以阻止onunload的执行。
onbeforeunload 是正要去服务器读 取新的页面时调用，此时还没开始读取；而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。
onunload事件
onunload 事件在用户退出页面时发生。
onunload 发生于当用户离开页面时发生的事件(通过点击一个连接，提交表单，关闭浏览器窗口等等。)
注意： onunload 事件同样触发了页面载入事件(+ onload 事件)。
语法
直接使用在html中：
<body onload="SomeJavaScriptCode">
注：以下 HTML 标签支持 onunload :
<body>,<frameset>
JavaScript 中:
window.onunload=function(){SomeJavaScriptCode};
例子：
//JS document window.onunload = function(){ alert("unload is work"); }
浏览器兼容情况
- IE浏览器 页面跳转、刷新页面能执行，但关闭浏览器不能执行；
- firefox 页面跳转能执行，但刷新页面、关闭浏览器不能执行；
- Safari 刷新页面、页面跳转，关闭浏览器都会执行；
- Opera、Chrome任何情况都不执行。
如图所示：
大体一句话描述：IE, Firefox, 和 Safari 支持 onunload 事件, 但是 Chrome 或者 Opera 不支持该事件。
onbeforeunload事件
onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。
该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。
对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似 "确定要离开此页吗？"。该信息不能删除。
但你可以自定义一些消息提示与标准信息一起显示在对话框。
注意： 如果你没有在 <body> 元素上指定 onbeforeunload 事件，则需要在 window 对象上添加事件，并使用 returnValue 属性创建自定义信息(查看以下语法实例)。
语法
html中使用：
<element onbeforeunload="myScript">
JavaScript 中：
object.onbeforeunload=function(){myScript};
JavaScript 中, 使用 addEventListener() 方法:
object.addEventListener("beforeunload", myScript);
注意： Internet Explorer 8 及更早 IE 版本不支持
addEventListener()方法。
JS中使用例子写法一：
//JS document window.onbeforeunload = function(){ return "onbeforeunload is work"; }
return 的值 为你需要告诉用户的提示信息如上面demo的话浏览器的提示是这样(firefox ，Chrome并不支持文字提醒)。
JS中使用例子写法二：
window.onbeforeunload = function(event) { event.returnValue = "我在这写点东西..."; };
值得注意的是，网上流传说 可以通过检查 e.clientX e.clientY 判断 用户是否点击 右上角关闭浏览器的，但是实践发现 只有 IE6，IE7，IE8 能获取得到具体数值，其他浏览器均为 undefined。
浏览器兼容情况
- IE、Safari 完美支持
- Firefox、Chrome 不支持文字提醒信息
- Opera 不支持
如图所示：
IE6,IE7 使用 onbeforeunload 遇到的bug
凡是 <a> 标签 都会触发 onbeforeunload事件 包括 href=”javascript:void(0)” 这种。
在IE6，IE7 下面 点击 里面的 a 标签，蛋疼的事情就发生了。
解决方法：给这 a标签的 父级 添加 onclick=function(){return false} 即可，不过添加了这个之后 要确保 父级里面没有 input type=”checkbox” 的标签，否则会导致其无效不可点击。
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- JS 控件事件小结 2020-03-25
- 分享JavaScript获取网页关闭与取消关闭的事件 2020-02-29
- jQuery事件绑定用法详解 2019-12-29
- input标签内容改变的触发事件介绍 2019-11-27
- 详解jQuery bind事件的操作方法 2019-11-03
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
