经常有这样的需求,就是在离开某个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. mitmdump 屏蔽443错误

    mitmdump --ignore-hosts ".*443$" -s test.py

  2. 【windows】在控制面板卸载软件的时候,出现2502,2503的问题

    1. 打开“任务管理器”,找到“详细信息”的页签,将“explorer.exe”的进程结束任务 2.菜单栏的“文件”-->"建立新任务"--> 输入Explorer.e ...

  3. TypeError: Object of type 'int64' is not JSON serializable

    错误类型:TypeError: Object of type 'int64' is not JSON serializable 错误场景:对Numpy和Pandas结果进行json.dumps报错 错 ...

  4. 树链刨分(class版)

    class版树链剖(刨)分 感谢沙华大佬的赞助 其实没什么太大变化,就是用了几次一顿乱指... CODE: #include<iostream> #include<cstdio> ...

  5. TcxGrid标题头 字体加粗

  6. Java @Override 注解

    @Override注解,不是关键字,但可以当关键字使用,可以选择添加这个注解,在你不留心重载而并非复写了该方法时,编译器就会产生一条错误:The method doh(Milhouse) of typ ...

  7. CF1064B 【Equations of Mathematical Magic】

    题目要求解$a-(a\oplus x)-x=0$的解$x$的个数 移项得$a-x=a\oplus x$ $a$的二进制形式,应该是一个$01$串,异或的过程是不能影响到两个不同的位的,所以我们按位考虑 ...

  8. IntelliJ IDEA JRebel Maven Tomcat 实现热部署

    一,JRebel 插件 获取与安装 直接在 IDEA 中操作获取 JRebel 插件 Paste_Image.png Paste_Image.png 安装完成,记得重启 IDEA 使刚才安装的插件生效 ...

  9. selenium 操作文本框(textarea输入)

    selenium 对文本框的输入操作一般有两种形式,传统的是直接通过定位元素通过sendKeys()方法直接在文本框中输入信息.但有时候我们可以通过id 的方式将其进行定位,但却不能通过sendKey ...

  10. Fiddler 常用功能总结

    1.fiddler相关配置   2.如何抓包 移动端 ①保持手机和电脑处于同一网络中 ②设置手机的代理为电脑当前所处网络的IP,端口号为:8888,eg:10.12.1.64:8888. ③ 启动ap ...