JS针对浏览器窗口关闭事件的监听方法集锦


Posted in Javascript onJune 24, 2016

本文实例总结了JS针对浏览器窗口关闭事件的监听方法。分享给大家供大家参考,具体如下:

方式一:(适用于IE浏览器,而且刷新不提示,只在点击浏览器关闭按钮的时候提示)

<script type="text/javascript">
window.onbeforeunload=onclose;
function onclose()
{
if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
{
return "您要离开吗?";
}
}
</script>

方式二:适用于IE和FF,不区分刷新和关闭

<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和FF,不区分刷新和关闭,最简单的

<script type="text/javascript">
window.onbeforeunload=onclose;
function onclose()
{
return "您确定退出吗?";
}
</script>

方式四:适用于IE和FF,不区分刷新和关闭,稍复杂的

<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>

另附判断浏览器类型的JS

<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和FF分别处理(奇怪的是,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,1会在if中自动转换为true,而IE则转换为NaN,再自动转换为false!

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
由浅到深了解JavaScript类
Sep 08 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
ajax请求get与post的区别总结
Nov 04 Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
vue中实现回车键登录功能
Feb 19 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 #Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 #Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 #Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 #Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 #Javascript
正则表达式(语法篇推荐)
Jun 24 #Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 #Javascript
You might like
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
Opacity.js
2007/01/22 Javascript
一页面多XMLHttpRequest对象
2007/01/22 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
python Tensor和Array对比分析
2020/01/08 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
标准导师推荐信(医学类)
2013/10/28 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
2014年环卫工作总结
2014/11/22 职场文书
环卫工作个人总结
2015/03/04 职场文书
Redis读写分离搭建的完整步骤
2021/09/14 Redis
浅谈Python中对象是如何被调用的
2022/04/06 Python