经常有这样的需求,就是在离开某个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. High-Speed Tracking with Kernelized Correlation Filters

          2015年的一篇论文,可参考:http://blog.csdn.net/carrierlxksuper/article/details/46461245.      另参考:http:// ...

  2. AndroidStudio3.0以上版本的坑

    原文:https://blog.csdn.net/ytfunnysite/article/details/78864556 1.Error:Failed to resolve: com.android ...

  3. Vue.Js的用户体验优化

    一次基于Vue.Js的用户体验优化   一.写在前面 半年以前,第一次在项目上实践VueJs,由于在那之前,没有Angular,avalon等框架的实践经验,所以在Vue的使用上,没有给自己总结出更多 ...

  4. 【Java】 int与char类型间的相互转化

    在[Java] 剑指offer(16) 打印1到最大的n位数中遇到了int类型与char类型之间的转换,这里总结一下. (1)int类型转char类型,将数字加一个‘0’,并强制类型转换为char即可 ...

  5. 003 RequestMapping——Ant路径

    一: 1.介绍 Ant风格资源地址支持3中配配符 ?:匹配文件名中的一个字符 *  :匹配文件名中的任意字符 **:匹配多层路径 2.RequestMapping支持的Ant风格的路径 二:程序说明 ...

  6. 003.Zabbix2.x-Server服务端安装

    一 环境基础 1.1 部署基础环境 部署Zabbix需要LAMP或LANP环境,数据库可以为MySQL或者MariaDB.硬件及存储条件按需配置. 1.2 常见依赖列表列表 Web前端需要支持的软件环 ...

  7. 011.MySQL双主多从+Keepalived配置

    一 基础环境 主机名 系统版本 MySQL版本 主机IP Master01 CentOS 6.8 MySQL 5.6 172.24.8.10 Master02 CentOS 6.8 MySQL 5.6 ...

  8. Python3 计算相关系数

    # -*- coding: utf-8 -*- """ Created on Mon Jan 8 19:36:48 2018 @author: markli " ...

  9. 初探Runloop(一)

    iOS 的最大特点就是运行时. 保证运行时的就是RunLoop 1.什么是RunLoop呢? 从字面理解就是:运行循环 引用下官方文档的介绍: A run loop is an event proce ...

  10. odoo权限管理(二.记录管理)

    规则保存在ir.rule模型表里,需要设置关联某个模型,关联很多组,访问权限控制和domian. 通过domain_force过滤出的一些记录来执行约束. 例子:经理只能删除状态为'cancel'的客 ...