onbeforeunload事件中调用Ajax实现用户注销操作(兼容IE、Firefox、Chrome)

转自:http://blog.csdn.net/lianchangshuai/article/details/9191483


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

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

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

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

主要代码如下:

[javascript] view plain copy
  1. function logout() {  
  2.                 var logoutURL = "xxxx"//用于注销用户的url  
  3.                 if (logoutURL == ""return;  
  4.                 var userAgent = navigator.userAgent.toLowerCase();  
  5.                 if(userAgent.indexOf("msie")>-1) { //IE  
  6.                     $.ajax({ url: logoutURL, crossDomain: true, async: false, dataType: "jsonp" });  
  7.                 }else { //FireFox Chrome  
  8.                     $.ajax({ url: logoutURL, async: false });  
  9.                 }  
  10.             }  
  11.   
  12.             window.onbeforeunload = function () {  
  13.                 logout();  
  14.             };  

代码说明:

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

[javascript] view plain copy
  1. if(userAgent.indexOf("msie")>-1) { //IE  
  2.                       
  3.                 }else { //FireFox Chrome  
  4.                       
  5.                 }  

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

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

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

针对IE的兼容代码如下:

[javascript] view plain copy
  1. $.ajax({ url: logoutURL, crossDomain: true, async: false, dataType: "jsonp" });  
crossDomain设置为true是为了解决跨域访问问题,如果不存在这个问题,这个属性可以忽略。async属性最好也设成false,true也可以。dataType:"jsonp"这个属性也是为解决跨域访问问题,和crossDomain配合使用,不存在跨域问题,这两个属性可省略。以上代码在IE9、Chrome27、Firefox21测试通过。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值