html5 关闭窗口事件,web窗口关闭事件之onunload、onbeforeunload事件详解

最近用到一个问题，当修改一篇内容时需要把此内容锁定，提交修改后解除锁定。那么问题出现了，当用户点了修改但未提交直接关掉窗口，那么此条信息一直处理锁定状态导致其他人员没办法修改。

在这里用到的是 onbeforeunload 事件。下面就梳理下 onunload、onbeforeunload 这两个事件，也顺带说说我遇到的问题与解决方案。

onunload，onbeforeunload都是在刷新或关闭时调用，可以在

onbeforeunload 是正要去服务器读 取新的页面时调用，此时还没开始读取；而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。

onunload事件

浏览器卸载页面后执行的事件, 虽然网上的资料没说什么兼容性的问题，但是实践发现兼容性并不理想。

使用方法//JS document

window.onunload = function(){

alert("unload is work");

}

但此方法有兼容问：

IE6，IE7，IE8 中 刷新页面、关闭浏览器之后、页面跳转之后都会执行；

IE9 刷新页面 会执行，页面跳转、关闭浏览器不能执行；

firefox(包括firefox3.6) 关闭标签之后、页面跳转之后、刷新页面之后能执行，但关闭浏览器不能执行；

Safari 刷新页面、页面跳转之后会执行，但关闭浏览器不能执行；

Opera、Chrome 任何情况都不执行。onbeforeunload事件

页面跳转时触发的事件。

使用方法//JS document

window.onbeforeunload = function(){

return "onbeforeunload is work";

}

return 的值 为你需要告诉用户的提示信息如上面demo的话浏览器的提示是这样(firefox 并不支持文字提醒)：

值得注意的是，网上流传说 可以通过检查 e.clientX e.clientY 判断 用户是否点击 右上角关闭浏览器的，但是实践发现 只有 IE6，IE7，IE8 能获取得到具体数值，其他浏览器均为 undefined。

但此方法有兼容问：

IE、Chrome、Safari 完美支持

Firefox 不支持文字提醒信息

Opera 不支持

IE6,IE7 使用 onbeforeunload 遇到的bug

用此事件没测试IE6、IE7单独360兼容模式都无效直接放弃了。。

特殊说明：

凡是 标签 都会触发 onbeforeunload事件 包括 href=”javascript:void(0)” 这种。

在IE6，IE7 下面 点击 里面的 a 标签，蛋疼的事情就发生了。

解决方法：给这 a标签的 父级 添加 οnclick=function(){return false} 即可，不过添加了这个之后 要确保 父级里面没有 input type=”checkbox” 的标签，否则会导致其无效不可点击。(此方法未测试)最终觖决办法：

经各种度娘找到利用JQUERY 的unload事件所有浏览器都可以写Cookie，经测试果然可以，最终用此方法搞定//页面A

alert(getCookie("testkkkkk"));

//页面B要处理关闭窗口页面

$(function () {

setCookie('testkkkkk', 0);

});

$(window).unload(function(){

//响应事件

setCookie('testkkkkk', 1);

});

打开页面A testkkkkk  值是null,打开页面B，关掉页面B，刷新页面A会发现 testkkkkk 值是1了。