浅谈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 相关文章推荐
jQuery 技巧大全(新手入门篇)
May 12 Javascript
JQuery里选择超链接的实现代码
May 22 Javascript
jQuery 联动日历实现代码
May 31 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
js特效,页面下雪的小例子
Jun 17 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
JavaScript实现区块链
Mar 14 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 Javascript
简单了解常用的JavaScript 库
Jul 16 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
日本十大惊悚动漫
2020/03/04 日漫
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
给php新手谈谈我的学习心得
2007/02/25 PHP
简单PHP上传图片、删除图片实现代码
2010/05/12 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
PHP开发注意事项总结
2015/02/04 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
JavaScript 特殊字符
2007/04/05 Javascript
js的with语句使用方法
2007/09/21 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python实现的Kmeans++算法实例
2014/04/26 Python
Python常用随机数与随机字符串方法实例
2015/04/09 Python
python3判断url链接是否为404的方法
2018/08/10 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
Django中ORM的基本使用教程
2020/12/22 Python
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
采购部经理岗位职责
2014/02/10 职场文书
学生安全责任书
2014/04/15 职场文书
战略合作协议书范本
2014/04/18 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
机关党员公开承诺书
2014/08/30 职场文书
2015国庆节宣传语
2015/07/14 职场文书
Python竟然能剪辑视频
2021/05/25 Python