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 相关文章推荐
jQuery 渐变下拉菜单
Dec 15 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 Javascript
js中 javascript:void(0) 用法详解
Aug 11 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
JavaScript判断数组是否存在key的简单实例
Aug 03 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 Javascript
微信小程序实现点赞业务
Feb 10 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
php面向对象的方法重载两种版本比较
2008/09/08 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
Yii学习总结之安装配置
2015/02/22 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
Web纯前端“旭日图”实现元素周期表
2017/03/10 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
js实现3D旋转效果
2020/08/18 Javascript
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python中__init__.py文件的作用详解
2016/09/18 Python
Python实现简单的四则运算计算器
2016/11/02 Python
Django中reverse反转并且传递参数的方法
2019/08/06 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
十八届三中全会个人学习材料
2014/02/13 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
《埃及的金字塔》教学反思
2014/04/07 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
MySQL 常见存储引擎的优劣
2021/06/02 MySQL
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android