经常有这样的需求,就是在离开某个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. 利用shell找出15分钟内修改的文件

    如果你的文件只是生成不会修改的话,可以这样: find * -mmin -15 2>/dev/null 如果可能修改,则需要这样(先创建一个 15 分之前的时间戳的文件,然后找比这个文件新的文件 ...

  2. MVC layout 命名空间引用问题

    虽然用MVC做了很多项目,但是都是在别人搭好的框架上实现 今天碰到一个很简单的命名空间引用问题 如图所示,Scripts和Styles 都没有引用命名空间 解决方法一: 直接使用 System.Web ...

  3. wordpress配置通过IP直接访问及apache的配置

    wordpress配置通过IP直接访问 环境: 操作系统:centos6.5 yum安装lamp环境: yum -y install mysql mysql-server php php-mysql ...

  4. Django项目之cookie+session

    原文:https://www.cnblogs.com/sss4/p/7071334.html HTTP协议 是短连接.且状态的,所以在客户端向服务端发起请求后,服务端在响应头 加入cokie响应给浏览 ...

  5. day16作业

    一.填空题 1.Integer Character 2.String s = "123";Integer i = new Integer(s);System.out.println ...

  6. Batch Normalization 与 Caffe中的 相关layer

    在机器学习领域,通常假设训练数据与测试数据是同分布的,BatchNorm的作用就是深度神经网络训练过程中, 使得每层神经网络的输入保持同分布. 原因:随着深度神经网络层数的增加,训练越来越困难,收敛越 ...

  7. Windows下安装Python requests模块

    在使用自己写的或者别人的python小工具时可能会出现类似ImportError: No module named Requests的问题: D:\tool\python\fuzz>Fuzz.p ...

  8. spring-cloud-sleuth+zipkin追踪服务实现(四)

    1.前言 在上一篇spring-cloud-sleuth+zipkin追踪服务实现(三)的处理实现后,很多朋友告诉我,在zipkin server的管理页面无法看到项目依赖关系. 当时也没有多想,以为 ...

  9. 关于 contentWindow, contentDocument

    没有永恒的技术只有变态的需求,没有好说的客户只有无奈的开发者, 如果iframe的出现是一个错误的话,iframe里边在来一个iframe那是错上加错,神话没有在远古的尘嚣中消失,却在怀具的今天不断上 ...

  10. P(查准率),R(查全率),F1 值

    起源: 我们平时用的精度 accuracy,也就是整体的正确率 acc=predict_right_num/predict_num 这个虽然常用,但不能满足所有任务的需求.比如,因为香蕉太多了,也不能 ...