浅谈window.onbeforeunload() 事件调用ajax


Posted in Javascript onJune 29, 2016

经常有这样的需求,就是在离开某个web页面时,用户不一定点注销,这样会导致会话不能及时销毁。为实现用户离开页面时,自动注销功能,需要在web页面的onbeforeunload事件处理函数中发送注销命令。这个地方大多用Ajax实现。有时还涉及到跨域访问的问题。这个地方就存在浏览器的兼容性问题。

浏览器在处理这个需求时的不兼容性有如下两点:

1、处理Ajax时的不兼容性,这里使用jQuery来解决。

2、在发送Ajax请求时的不兼容性

主要代码如下:

function logout() { 
        var logoutURL = "xxxx"; //用于注销用户的url 
        if (logoutURL == "") return; 
        var userAgent = navigator.userAgent.toLowerCase(); 
        if(userAgent.indexOf("msie")>-1) { //IE 
          $.ajax({ url: logoutURL, crossDomain: true, async: false, dataType: "jsonp" }); 
        }else { //FireFox Chrome 
          $.ajax({ url: logoutURL, async: false }); 
        } 
      } 
 
      window.onbeforeunload = function () { 
        logout(); 
      };

代码说明:

firefox在处理js时的安全级别较高,很多IE、Chrome中js可以使用的权限在Friefox中被限制,因此通过

if(userAgent.indexOf("msie")>-1) { //IE
          
        }else { //FireFox Chrome
          
        }

这段代码来判断当前浏览器类型。

针对Firefox、Chrome的兼容代码如下:

$.ajax({ url: logoutURL, async: false });

async需要设为false,即为同步,不能采用true异步的方式,否则请求有可能发不出去。其实Chrome也适用于下面针对IE的代码,在关掉浏览器时会自动发送注销命令,但是点浏览器的刷新按钮时也希望能自动注销用户时,Chrome就只能采用上面这行代码才能发出注销请求

针对IE的兼容代码如下:

$.ajax({ url: logoutURL, crossDomain: true, async: false, dataType: "jsonp" });

crossDomain设置为true是为了解决跨域访问问题,如果不存在这个问题,这个属性可以忽略。async属性最好也设成false,true也可以。dataType:"jsonp"这个属性也是为解决跨域访问问题,和crossDomain配合使用,不存在跨域问题,这两个属性可省略。

以上代码在IE9、Chrome27、Firefox21测试通过。

以上就是小编为大家带来的浅谈window.onbeforeunload() 事件调用ajax(标题)全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
May 26 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
JavaScript & jQuery完美判断图片是否加载完毕
Jan 08 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 Javascript
electron实现静默打印的示例代码
Aug 12 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 #Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 #Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 #Javascript
jqGrid用法汇总(全经典)
Jun 28 #Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 #Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 #Javascript
浅谈js的url解析函数封装
Jun 28 #Javascript
You might like
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
生物技术研究生自荐信
2013/11/12 职场文书
农场厂长岗位职责
2013/12/28 职场文书
学生周末长期请假条
2014/02/15 职场文书
采购部长岗位职责
2014/06/13 职场文书
简爱读书笔记
2015/06/26 职场文书
傅雷家书读书笔记
2015/06/29 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL