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插件 cluetip 关键词注释
Jan 12 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
JavaScript实现列出数组中最长的连续数
Dec 29 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
jQuery表单验证之密码确认
May 22 jQuery
angular+webpack2实战例子
May 23 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
vue组件vue-esign实现电子签名
Apr 21 Vue.js
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实现股票趋势图和柱形图
2015/02/07 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
Python自带的IDE在哪里
2020/07/01 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
详解python变量与数据类型
2020/08/25 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
结构和类有什么异同
2012/07/16 面试题
工程力学硕士生的自我评价范文
2013/11/16 职场文书
物业招聘计划书
2014/01/10 职场文书
联谊活动策划书
2014/01/26 职场文书
求职信模板怎么做
2014/01/26 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
Java spring定时任务详解
2021/10/05 Java/Android
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python