JavaScript监听浏览器窗口关闭事件的多种实现方案
本文汇总了JavaScript中监听浏览器窗口关闭及刷新事件的多种实现方式。涵盖从简单的onbeforeunload赋值到复杂的IE与Firefox兼容处理,包括通过event.clientX判断关闭按钮点击、区分刷新与关闭操作,以及浏览器类型检测技巧。提供了适用于不同浏览器版本的代码示例,帮助开发者根据需求选择最合适的拦截方案。
JavaScript监听窗口关闭事件概述
本文汇总了JavaScript中监听浏览器窗口关闭事件的多种实现方法,供开发者参考。
常见窗口关闭监听方案
第一种方式适用于IE浏览器。其特点是刷新页面时不弹出提示,仅在用户点击浏览器右上角的关闭按钮时才触发提示。
<script type="text/javascript">
window.onbeforeunload=onclose;
function onclose()
{
if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
{
return "您要离开吗?";
}
}
</script>
第二种方式同时适用于IE和Firefox浏览器。该方案不区分页面刷新与窗口关闭操作,两者均会触发提示。
<script type="text/javascript">
window.onbeforeunload = onbeforeunload_handler;
window.onunload = onunload_handler;
function onbeforeunload_handler(){
var warning="确认退出?";
return warning;
}
function onunload_handler(){
var warning="谢谢光临";
alert(warning);
}
</script>
第三种方式同样适用于IE和Firefox浏览器,且不区分刷新与关闭操作,实现代码最为简洁。
<script type="text/javascript">
window.onbeforeunload=onclose;
function onclose()
{
return "您确定退出吗?";
}
</script>
第四种方式适用于IE和Firefox浏览器,不区分刷新与关闭操作,但实现逻辑相对复杂一些。
<script language="javascript">
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);
</script>
第五种方式仅适用于IE6浏览器,针对关闭按钮和快捷键关闭进行监听,刷新页面时不会提示。
<script type="text/javascript">
window.onbeforeunload=onclose;
function onclose()
{
var warnning = '<fmt:message key="systemMessage.exitWarning" />';
var beforeExit='<fmt:message key="systemMessage.beforeExitWarning" />';
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;
}
}
</script>
浏览器类型检测技巧
此外,文章还附带了判断浏览器类型的JavaScript代码。
<script type="text/javascript">
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);
</script>
通过区分浏览器类型,对IE和Firefox分别进行处理。需要注意的是,在IE环境下该方案有时会出现失效的情况。
<script type="text/javascript">
window.onbeforeunload=onclose;
function onclose()
{
var Sys = {};
var warnning = '<fmt:message key="systemMessage.exitWarning" />';
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;
}
</script>
这里介绍一种判断浏览器类型的最简单方法。
<script type="text/javascript">
if(-[1,]){
alert("这不是IE浏览器!");
}else{
alert("这是IE浏览器!");
}
</script>
[1,]在标准浏览器会返回字符串"1",相当于调用[1,].toString, ,IE则返回"1,"。但是这样IE与标准都会通过检测,因此使用负号强制转换为数字,
标准浏览器能成功将结果转换为数字1,在if条件判断中会自动转换为true;而IE浏览器则转换为NaN,进而自动转换为false。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述的代码示例对大家进行JavaScript程序设计有所帮助。
JS在setTimeout或Ajax回调中打开新标签页失败怎么处理
2026-11-05 15:50:12
JS直播协议选型:HLS、FLV与WebRTC的延迟与兼容性对比
2026-11-05 12:16:14
JS实现回到顶部:scrollTop赋值与浏览器兼容性处理
2026-11-04 23:43:35
JS使用classList动态添加、移除和切换CSS类名
2026-11-04 23:40:58
在 D3.js 中实现平滑过渡动画的技巧
2026-11-03 23:46:09
