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=' ...
随机推荐
- MySQL用户密码过期登陆报错ERROR 1820 (HY000): You must reset your password using ALTER USER statement before executing this statement.
今天接到主从复制失败告警,查看MySQL,发现MySQL能够登陆但是执行命令报错, ERROR 1820 (HY000): You must reset your password using ALT ...
- day16作业
一.填空题 1.Integer Character 2.String s = "123";Integer i = new Integer(s);System.out.println ...
- goodrain云平台 mysql主从同步应用创建
mysql 主从同步原理 1)在Slave 服务器上执行sart slave命令开启主从复制开关,开始进行主从复制. 2)此时,Slave服务器的IO线程会通过在master上已经授权的复制用户权限请 ...
- 【招聘】这一次,我们Hold住了世界杯
作为国内最大的云计算服务商,阿里云在视频领域拥有绝对的技术优势,全球范围内拥有1500多个CDN节点,带宽储备120多T,不仅为优酷.CNTV.CCTV5提供技术支撑,还承担了全网70%的世界杯流量. ...
- interface关键字定义接口
package interface0; public interface InterfaceTest { /* * 接口的定义,使用interface关键字定义接口 */ public interfa ...
- iOS企业包安装注意事项详解(解决提示iPhone未受信任的问题)
请在Safari浏览器上打开该页面才能正常安装. 如果您是微信中查看该页面,请点击右上角,在弹出的菜单中选择“在Safari中打开” 对于iOS版本为7.X和8.X的用户,直接点击安装即可(此处为it ...
- for-in循环(for-in Loops)
for-in循环应该用在非数组对象的遍历上,使用for-in进行循环也被称为“枚举”. 从技术上将,你可以使用for-in循环数组(因为JavaScript中数组也是对象),但这是不推荐的.因为如果数 ...
- Codeforces 1028E Restore Array 构造
我发现我构造题真的不会写, 想了好久才想出来.. 我们先把n = 2, 所有数字相等, 所有数字等于0的都特判掉. 找到一个b[ i ] > b[ i - 1 ]的位置把它移到最后一个位置, 并 ...
- 040 DataFrame中的write与read编程
一:SparkSQL支持的外部数据源 1.支持情况 2.External LIbraries 不是内嵌的,看起来不支持. 但是现在已经有很多开源插件,可以进行支持. 3.参考材料 · 支持的格式:ht ...
- 使用Vmware安装linux且配置终端可以连接虚拟机总结
首先是下载一个linux镜像,我下载的是:ubuntu-16.04.2-desktop-amd64.iso 1.使用vmware安装linux,都使用默认的配置就行了,最多改一下主机名什么的,密码最好 ...