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 相关文章推荐
关于this和self的使用说明
Aug 01 Javascript
基于jquery的loading 加载提示效果实现代码
Sep 01 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
JavaScript中一些特殊的字符运算
Aug 17 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
Dec 16 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 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下获取客户端ip地址的函数
2010/03/15 PHP
PHP伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
php字符集转换
2017/01/23 PHP
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
详述JavaScript实现继承的几种方式(推荐)
2016/03/22 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
Angular 如何使用第三方库的方法
2018/04/18 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
Python安装whl文件过程图解
2020/02/18 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
生物技术毕业生自荐信
2013/10/23 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
文员岗位职责范本
2014/03/08 职场文书
小学社会实践活动总结
2014/07/03 职场文书
升职自我推荐信范文
2015/03/25 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
客户付款通知书
2015/04/23 职场文书
停车场管理制度范本
2015/08/05 职场文书
军训后的感想
2015/08/07 职场文书
家电创业计划书
2019/08/05 职场文书
MYSQL 表的全面总结
2021/11/11 MySQL