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 表单之间的数据传递代码
Dec 04 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
javascript 正则表达式相关应介绍
Nov 27 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 Javascript
一篇文章弄清楚Ajax请求的五个步骤
Mar 17 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弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
js评分组件使用详解
2017/06/06 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
js实现简单点赞操作
2020/03/17 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
python实现折半查找和归并排序算法
2017/04/14 Python
python如何在循环引用中管理内存
2018/03/20 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
在python中用url_for构造URL的方法
2019/07/25 Python
django foreignkey(外键)的实现
2019/07/29 Python
python实现tail -f 功能
2020/01/17 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
深入探究HTML5的History API
2015/07/09 HTML / CSS
在校大学生的职业生涯规划书
2014/03/14 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
工作失职检讨书500字
2014/10/17 职场文书
电影建党伟业观后感
2015/06/01 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js
MySQL实现配置主从复制项目实践
2022/03/31 MySQL