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居然支持中文(unicode)编程!
Apr 12 Javascript
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 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/05/16 PHP
PHP header函数分析详解
2011/08/06 PHP
如何让CI框架支持service层
2014/10/29 PHP
php的4种常见运行方式
2015/03/20 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
php实现留言板功能
2017/03/05 PHP
JQuery之focus函数使用介绍
2013/08/20 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
用Python进行TCP网络编程的教程
2015/04/29 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
详解Flask前后端分离项目案例
2020/07/24 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
web页面录屏实现
2019/02/12 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
Shein英国:女性时尚网上商店
2019/04/10 全球购物
毕业设计论文评语
2014/12/31 职场文书
婚宴新娘致辞
2015/07/28 职场文书
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript
Redis三种集群模式详解
2021/10/05 Redis
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript
python游戏开发之pygame实现接球小游戏
2022/04/22 Python