浅谈window.onbeforeunload() 事件调用ajax


Posted in Javascript onJune 29, 2016

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

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

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

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

主要代码如下:

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中被限制,因此通过

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

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

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

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

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

针对IE的兼容代码如下:

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

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

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

以上就是小编为大家带来的浅谈window.onbeforeunload() 事件调用ajax(标题)全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
javascript在一段文字中的光标处插入其他文字
Aug 26 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
一个php+js实时显示时间问题
Oct 12 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
JS打开摄像头并截图上传示例
Feb 18 Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
Vue.js实现表格渲染的方法
Sep 07 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 #Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 #Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 #Javascript
jqGrid用法汇总(全经典)
Jun 28 #Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 #Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 #Javascript
浅谈js的url解析函数封装
Jun 28 #Javascript
You might like
PHP时间格式控制符对照表分享
2013/07/23 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
初学JavaScript第二章
2008/09/30 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python文件和目录操作详解
2015/02/08 Python
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
获取Django项目的全部url方法详解
2017/10/26 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
Python list与NumPy array 区分详解
2019/11/06 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
Reformation官网:美国女装品牌
2018/09/14 全球购物
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
初中校园之声广播稿
2014/01/15 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书