本文实例总结了JS针对浏览器窗口关闭事件的监听方法。分享给大家供大家参考，具体如下：
 
方式一：(适用于IE浏览器，而且刷新不提示，只在点击浏览器关闭按钮的时候提示)
 
window.οnbefοreunlοad=onclose;
 
function onclose()
 
{
 
if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
 
{
 
return "您要离开吗？";
 
}
 
}
 
方式二：适用于IE和FF，不区分刷新和关闭
 
window.onbeforeunload = onbeforeunload_handler;
 
window.onunload = onunload_handler;
 
function onbeforeunload_handler(){
 
var warning="确认退出?";
 
return warning;
 
}
 
function onunload_handler(){
 
var warning="谢谢光临";
 
alert(warning);
 
}
 
方式三：适用于IE和FF，不区分刷新和关闭，最简单的
 
window.οnbefοreunlοad=onclose;
 
function onclose()
 
{
 
return "您确定退出吗？";
 
}
 
方式四：适用于IE和FF，不区分刷新和关闭，稍复杂的
 
var MSG_UNLOAD="如果你此时离开档案系统，所做操作信息将全部丢失，是否离开?";
 
var UnloadConfirm = {};
 
//启用监听浏览器刷新、关闭的方法
 
UnloadConfirm.set = function(confirm_msg){
 
window.onbeforeunload = function(event){
 
event = event || window.event;
 
event.returnValue = confirm_msg;
 
}
 
}
 
//关闭监听浏览器刷新、关闭的方法
 
UnloadConfirm.clear = function(){
 
window.onbeforeunload = function(){};
 
}
 
UnloadConfirm.set(MSG_UNLOAD);
 
方式五：只适用于IE6下的关闭按钮和快捷键关闭的，刷新不提示
 
window.οnbefοreunlοad=onclose;
 
function onclose()
 
{
 
var warnning = '';
 
var beforeExit='';
 
if(event.clientY<0 && event.clientX>document.body.clientWidth-20 || event.clientY<0 && event.clientX<20 ||
 
event.altKey || event.ctrlKey || event.clientY>document.body.clientHeight){
 
alert(beforeExit);
 
return warnning;
 
}
 
}
 
另附判断浏览器类型的JS
 
var Sys = {};
 
var ua = navigator.userAgent.toLowerCase();
 
if (window.ActiveXObject)
 
Sys.ie = ua.match(/msie ([\d.]+)/)[1]
 
else if (document.getBoxObjectFor)
 
Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]
 
else if (window.MessageEvent && !document.getBoxObjectFor)
 
Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1]
 
else if (window.opera)
 
Sys.opera = ua.match(/opera.([\d.]+)/)[1]
 
else if (window.openDatabase)
 
Sys.safari = ua.match(/version\/([\d.]+)/)[1];
 
//以下进行测试
 
if(Sys.ie) document.write('IE: '+Sys.ie);
 
if(Sys.firefox) document.write('Firefox: '+Sys.firefox);
 
if(Sys.chrome) document.write('Chrome: '+Sys.chrome);
 
if(Sys.opera) document.write('Opera: '+Sys.opera);
 
if(Sys.safari) document.write('Safari: '+Sys.safari);
 
区分浏览器，IE和FF分别处理(奇怪的是,IE下有时候失效)
 
window.οnbefοreunlοad=onclose;
 
function onclose()
 
{
 
var Sys = {};
 
var warnning = '';
 
var ua = navigator.userAgent.toLowerCase();
 
if (window.ActiveXObject)
 
Sys.ie = ua.match(/msie ([\d.]+)/)[1]
 
else if (document.getBoxObjectFor)
 
Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]
 
if(Sys.ie) {//for IE
 
if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
 
{
 
window.event.returnValue = warnning ;
 
}
 
}
 
if(Sys.firefox) //for FF
 
return warnning;
 
}
 
最简单的判断浏览器类型的方法
 
if(-[1,]){
 
alert("这不是IE浏览器！");
 
}else{
 
alert("这是IE浏览器！");
 
}
 
[1，]在标准浏览器会返回字符串"1",相当于调用[1,].toString,
 
,IE则返回"1,"。但是这样IE与标准都会通过检测，因此使用负号强制转换为数字，
 
标准能成功转换为1，1会在if中自动转换为true，而IE则转换为NaN,再自动转换为false!
 
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
 
希望本文所述对大家JavaScript程序设计有所帮助。
 

 

 
本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉
 
本文系统来源：php中文网

亲测；以下代码对ie，360，qq，chrom浏览器有效。。。beforeunload事件和unload事件请自行百度。
 
$(window).on('beforeunload unload', function() {
            $.ajax({
                //发送请求，刷新一次，后台数据自增一次，大家查看后台数据就知道了，这两个事件是起了作用的
                url:url,
            });
        });
 
异步是在事件响应后请求的，所以，只能去后台看你数据库有没有新增，修改，或删除。【注意：是页面刷新或关闭后，才能执行异步的】。
 
以下代码，亲测，对火狐和ie都有效。
 
window.onunload = function (){
                $.ajax({
                    //发送请求，刷新一次，后台数据自增一次，大家查看后台数据就知道了，这两个事件是起了作用的
                    url:url,
                });
            }
            window.onbeforeunload = function (){
                $.ajax({
                    //发送请求，刷新一次，后台数据自增一次，大家查看后台数据就知道了，这两个事件是起了作用的
                    url:url,
                });
            };
 
 
 
 

 
有一个需求，当用户在页面中进行刷新和关闭页面的时候显示一个弹框提示用户功能。
 
于是自己就想到onbeforeunload、onunload、onload这几个事件，但是在使用的过程中有种心累的感觉。。。
 
onbeforeunload：在页面刷新和关闭的时候触发事件，表示正要去服务器读 取新的页面时调用，此时还没开始读取，
 
onunload：则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。
 
onload就不用说了
 
onbrforeunload和onunload都会在刷新和关闭页面是触发，但是onbeforeunload在onunload之前执行，并且它还可以阻止onunload的执行。那么在页面刷新时执行顺序就是onbeforeunload、onunload、onload
 
但是在使用的过程中，自己深深的踩了一个坑
 
首先是是兼容性的问题：
 
正如你看到的菜鸟教程和w3c上的介绍是多么的赏心悦目
 

 

 
但是现实总是残酷的，onbeforeunload事件在ie和谷歌中都没有问题，但是在火狐中却没有任何反应，代码如下：
Document
 
//这个在火狐下不起作用
 
window.οnbefοreunlοad=function(e){
 
return "我在这写点东西";
 
}
 
window.οnunlοad=function(){
 
alert("离开")
 
}
 
window.οnlοad=function(){
 
alert("加载完成");
 
}
 
onbeforeunload中的return是自定义提示信息，并且如果没有return在谷歌中是不会有反应，ie则不会出现这个情况。
 
onunload事件也只有在ie中才起作用，在其他浏览器中也没有反应。
 
不知道哪位大神可以解答一下，怎么解决这些问题(百度找了好多，都是一些没有用的方法...)

页面初始化
 
load事件类型在页面完全加载完毕的时候触发。该事件包含所有的图形图像、外部文件（如CSS、JS文件等）的加载，也就是说，在页面所有内容全部加载之前，任何DOM操作都不会发生。为window对象绑定load事件类型的方法有两种：
 
1. 直接为window对象注册页面初始化事件处理函数：
 
window.onload = function(){
	alert("页面加载完毕");
}
 
2. 在页面< body >标签中定义onload事件处理属性：
 
<body onload="f()">
<script>
	function f(){
		alert("页面加载完毕");
	}
</script>
 
注意：如果同时使用上面两种方法定义页面初始化事件类型，它们并没有发生冲突，也不会出现两次触发事件。
 
JavaScript解释器在编译时，如果发现同时使用两种方法定义load事件类型，会使用window对象注册的事件处理函数覆盖掉body元素定义的页面初始化事件属性。
 
页面卸载
 
unload表示卸载的意思，这个事件在从当前浏览器窗口内移动文档的位置时触发，也就是说，通过超链接、前进或后退按钮等方式从一个页面跳转到其他页面，或者关闭浏览器窗口时触发。
 
window.onunload = f;
function f(){
	alert("888");
}
 
在unload事件类型中无法有效阻止默认行为，因为该事件结束后，页面将不复存在。由于在窗口关闭或离开页面之前只有很短的时间来执行时间处理函数，所以不建议使用该事件类型。使用该事件类型的最佳方式是取消该页面对象的引用。
 
beforeunload事件
 
beforeunload事件类型与unload事件类型功能相似，不过它更人性化，如果beforunload事件处理函数返回字符串信息，那么该字符串会显示一个确认对话框，询问用户是否离开当前页面。
 
示例：
 
window.onbeforeunload = function(e){
	return "您的数据还未保存！";
}