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 相关文章推荐
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
Dec 17 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
Aug 02 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 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服务器实现多session并发运行
2006/10/09 PHP
五个PHP程序员工具
2008/05/26 PHP
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
php生成随机字符串可指定纯数字、纯字母或者混合的
2014/04/18 PHP
php实现的短网址算法分享
2014/06/20 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
jQuery让控件左右移动的三种实现方法
2013/09/08 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
浅析python中的del用法
2020/09/02 Python
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
安全生产标语大全
2014/10/06 职场文书
毕业论文致谢范文
2015/05/14 职场文书
医院党建工作总结2015
2015/05/26 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js