浅谈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 相关文章推荐
jQuery 使用手册(四)
Sep 23 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
Nov 28 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
jquery引用方法时传递参数原理分析
Oct 13 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 Javascript
Element Input输入框的使用方法
Jul 26 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
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
javascript实现密码验证
2015/11/10 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
Python中针对函数处理的特殊方法
2014/03/06 Python
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
Python切片操作实例分析
2018/03/16 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
史上最全面的Java面试题汇总!
2015/02/03 面试题
行政管理专业推荐信
2013/11/02 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
竞选村长演讲稿
2014/04/28 职场文书
家庭教育的心得体会
2014/09/01 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
公司车队管理制度
2015/08/04 职场文书
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript
Linux安装Docker详细教程
2022/07/07 Servers