window.onbeforeunload() 事件调用ajax
经常有这样的需求,就是在离开某个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();
- };
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
- }
if(userAgent.indexOf("msie")>-1) { //IE
}else { //FireFox Chrome
}
这段代码来判断当前浏览器类型。
针对Firefox、Chrome的兼容代码如下:
- $.ajax({ url: logoutURL, async: false });
$.ajax({ url: logoutURL, async: false });
async需要设为false,即为同步,不能采用true异步的方式,否则请求有可能发不出去。其实Chrome也适用于下面针对IE的代码,在关掉浏览器时会自动发送注销命令,但是点浏览器的刷新按钮时也希望能自动注销用户时,Chrome就只能采用上面这行代码才能发出注销请求
针对IE的兼容代码如下:
- $.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的更多相关文章
- 如何在点击 a 标签的 onclick 时间时,不触发 window.onbeforeunload 事件
如题! 直接贴代码了: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- 转载:解决IE下a标签会触发window.onbeforeunload的问题
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- 浏览器关闭或刷新事件--window.onbeforeunload
window.onunload=function(){ //不可以阻止浏览器的刷新或者关闭 return false; } window.onbeforeunload=function(){ //可以 ...
- jQuery调用AJAX异步详解[转]
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- 各浏览器对 onbeforeunload 事件的支持与触发条件实现有差异
转载:http://www.w3help.org/zh-cn/causes/BX2047 标准参考 无. 问题描述 一般情况下,onbeforeunload 事件处理函数内会写入一些提示性语句,当用户 ...
- JS之onunload、onbeforeunload事件详解
简介 onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过 window.onunload来调用.区别在于onbeforeunload在o ...
- 160503、onunload、onbeforeunload事件详解
最近项目中做到一个功能:在上传页面用户开始上传文件之后用户点击任意跳转都需要弹出提示层进行二次确定才允许他进行跳转,这样做的目的是为了防止用户的错误操作导致这珍贵的UGC 流失(通常用户在一次上传不成 ...
- onunload、onbeforeunload事件详解--zhuan
最近项目中做到一个功能:在上传页面用户开始上传文件之后用户点击任意跳转都需要弹出提示层进行二次确定才允许他进行跳转,这样做的目的是为了防止用户的错误操作导致这珍贵的UGC 流失(通常用户在一次上传不成 ...
- 封装、调用ajax
1.JavaScript代码 //封装ajaxfunction ajax(obj) { var xhr = new createXHR(); obj.url = obj.url + '?rand=' ...
随机推荐
- 关于 VS 2010 和 VS 2013 的警告 LNK4042
由于我最近调整了一下 Jimi 的文件结构,导致出现了一个 LNK4042 的 warning,我并没有很重视,这个 warning 导致出现了一些错误. 我调试了几个小时,一开始并没有想到是这个 w ...
- springmvc上下文与springcontext上下文的关系
内容摘自:springmvc与spring上下文的关系 原理区别 一直不清楚springmvc-servlet.xml配置与spring.xml两个配置文件出现的上下文关系.今天找到一上面的文章,倒是 ...
- Windows caffe VGG人脸识别
caffe自带的例子有mnist和cifar10,cifar10和mnist的运行方式类型,下好图片数据文件后,训练例子中的模型,然后测试模型,也可以自己用图片进行预测分类(自己图片最好是cifar1 ...
- java 异常与记录日志
一. 你可能还想利用java.util.logging工具将输出记录到日志中 package exceptions; //: exceptions/LoggingExceptions.java // ...
- 用 javascript 实现 ping 一个主机,仅测试是否能够连接。
function ping(ip){ var img = new Image(); var start = new Date().getTime(); img.src = "http://& ...
- 【LOJ】#121. 「离线可过」动态图连通性
题解 和BZOJ4025挺像的 就是维护边权是时间的最大生成树 删边直接删 两点未联通时直接相连,两点联通则找两点间边权小的一条边删除即可 代码 #include <bits/stdc++.h& ...
- HttpClient-----待补充
1.简介 HTTP 协议可能是现在 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序需要直接通过 HTTP 协议来访问网络资源.虽然在 JDK 的 java.net 包中 ...
- Android导入依赖appcompat-v7报错
Android导入依赖appcompat-v7报错 导入appcompat-v7时报错了 导入的是implementation 'com.android.support:appcompat-v7: ...
- ubuntu下安装python3及常用爬虫库命令
爬虫常用库安装:
- P1375 小猫(二飞的小憨猫)
P1375 小猫(二飞的小憨猫)连两个点,就把一个多边形,分成了两部分,这两部分的点一定得是偶数,这样就可以递推啦,比如h[5]==h[4][0]+h[3][1]+h[2][2]+h[1][3]+h[ ...