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 相关文章推荐
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
JS增加行复制行删除行的实现代码
Nov 09 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
小程序开发基础之view视图容器
Aug 21 Javascript
详解webpack模块加载器兼打包工具
Sep 11 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 多维数组排序实现代码
2009/08/05 PHP
php数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
使用php实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
php中动态修改ini配置
2014/10/14 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
JavaScript实现计数器基础方法
2017/10/10 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
英国电器零售商:PRC Direct
2018/06/21 全球购物
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
餐饮部总监岗位职责范文
2014/02/13 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
英语教育专业自荐信
2014/05/29 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
党员作风建设整改方案
2014/10/27 职场文书
教师年度考核个人总结
2015/02/12 职场文书