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

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

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

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

主要代码如下:

  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. window.onbeforeunload = function () {
  12. logout();
  13. };
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中被限制,因此通过

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

                }else { //FireFox Chrome

                }

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

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

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

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

针对IE的兼容代码如下:

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

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

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

window.onbeforeunload() 事件调用ajax的更多相关文章

  1. 如何在点击 a 标签的 onclick 时间时,不触发 window.onbeforeunload 事件

    如题! 直接贴代码了: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  2. 转载:解决IE下a标签会触发window.onbeforeunload的问题

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  3. 浏览器关闭或刷新事件--window.onbeforeunload

    window.onunload=function(){ //不可以阻止浏览器的刷新或者关闭 return false; } window.onbeforeunload=function(){ //可以 ...

  4. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  5. 各浏览器对 onbeforeunload 事件的支持与触发条件实现有差异

    转载:http://www.w3help.org/zh-cn/causes/BX2047 标准参考 无. 问题描述 一般情况下,onbeforeunload 事件处理函数内会写入一些提示性语句,当用户 ...

  6. JS之onunload、onbeforeunload事件详解

    简介 onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过 window.onunload来调用.区别在于onbeforeunload在o ...

  7. 160503、onunload、onbeforeunload事件详解

    最近项目中做到一个功能:在上传页面用户开始上传文件之后用户点击任意跳转都需要弹出提示层进行二次确定才允许他进行跳转,这样做的目的是为了防止用户的错误操作导致这珍贵的UGC 流失(通常用户在一次上传不成 ...

  8. onunload、onbeforeunload事件详解--zhuan

    最近项目中做到一个功能:在上传页面用户开始上传文件之后用户点击任意跳转都需要弹出提示层进行二次确定才允许他进行跳转,这样做的目的是为了防止用户的错误操作导致这珍贵的UGC 流失(通常用户在一次上传不成 ...

  9. 封装、调用ajax

    1.JavaScript代码 //封装ajaxfunction ajax(obj) { var xhr = new createXHR(); obj.url = obj.url + '?rand=' ...

随机推荐

  1. Apache+Tomcat+mod_jk实现负载均衡

    最近公司提出了负载均衡的新需求,以减轻网站的高峰期的服务器负担.趁空闲时间我就准备了一下这方面的知识,都说有备无患嘛.网上相关资料很多,但是太散.我希望可以通过这篇随笔,系统的总结. 一.Tomcat ...

  2. MAC连接安卓手机通过adb指令安装apk

    Android的apk可以通过adb命令来安装.在MAC电脑上,如果想通过命令行的方式给安卓手机安装apk,需要做以下操作: 一句话概括就是:将安卓SDK的adb命令添加到环境变量中,然后通过adb ...

  3. selenium玩转svg操作

    今天写脚本发现页面有svg结构,里面的元素无法定位,查找很多资料,然后就记录下来 初步尝试直接在页面中获取svg中包含元素的xpath,直接利用selenium方法访问,无法捕获到相关元素信息. SV ...

  4. 09 Go 1.9 Release Notes

    Go 1.9 Release Notes Introduction to Go 1.9 Changes to the language Ports ppc64x requires POWER8 Fre ...

  5. Go语言Windows 10开发环境搭建:Eclipse+GoClipse

    Intel Core i5-8250U,Windows 10家庭中文版,go version go1.11 windows/amd64, Eclipse IDE for C/C++ Developer ...

  6. MongoDB aggregate 运用篇(转)

    http://www.cnblogs.com/qq78292959/p/4440679.html 最近一直在用mongodb,有时候会需要用到统计,在网上查了一些资料,最适合用的就是用aggregat ...

  7. SqlServer中Sql查看存储过程

    ( 一)利用Sql语句查询数据库中的所有表 1.利用sysobjects系统表 select * from sysobjects where xtype='U'  2,利用sys.tables目录视图 ...

  8. poj 2524 求连通分量(并查集模板题)

    求连通分量 Sample Input 10 91 21 31 41 51 61 71 81 91 1010 42 34 54 85 80 0Sample Output Case 1: 1Case 2: ...

  9. GitLab备份的创建与恢复

    使用Gitlab一键安装包安装Gitlab非常简单, 同样的备份恢复与迁移也非常简单. 使用一条命令即可创建完整的Gitlab备份: gitlab-rake gitlab:backup:create使 ...

  10. kafka 基础知识梳理

    一.kafka 简介 kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据.这种动作(网页浏览,搜索和其他用户的行动)是在现代网络上的许多社会功能的一个关键因 ...