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全部源代码
May 04 Javascript
javascript之学会吝啬 精简代码
Apr 25 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
jQuery动态修改字体大小的方法【测试可用】
Sep 09 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
JavaScrpt的面向对象全面解析
May 09 Javascript
深入研究React中setState源码
Nov 17 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 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
php5 pdo新改动加载注意事项
2008/09/11 PHP
php checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
smarty简单应用实例
2015/11/03 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
JavaScript的eval JSON object问题
2009/11/15 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
python 根据pid杀死相应进程的方法
2017/01/16 Python
Python 查看文件的读写权限方法
2018/01/23 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
详解python logging日志传输
2020/07/01 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
美国创意之家:BulbHead
2017/07/12 全球购物
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
高中毕业的自我鉴定
2013/12/09 职场文书
给领导的致歉信范文
2014/01/13 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
消防安全责任书范本
2014/04/15 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
与死神共舞观后感
2015/06/15 职场文书
圣诞晚会主持词
2015/07/01 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
高中数学教学反思范文
2016/02/18 职场文书
导游词之青城山景区
2019/09/27 职场文书