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=' ...
随机推荐
- 不借助autolt实现下载文件到指定目录
今天尝试了下不用借助autolt完成下载文件到指定目录, 好处:在于集成回归,远程机可以绕过执行autolt程序权限问题,导致autolt程序无法调用,不能完成脚本的回归 Firefox浏览器已经成功 ...
- 【linux】grep的使用
最近发现了grep一个超级好用的指令 1. 在当前目录及其子目录中查找所有包含字符串abc的文件及位置 grep -rn "abc" * 2. 查找不包含"abc&quo ...
- 解决tomcat 启动 一闪而过
有的朋友在启动Tomcat的时候会出现问题. 1例如: 手动点击startup.bat 后 ,一闪而过 2例如:在cmd下 进到tomcat的bin目录 运行 startup.bat ,然后输出 了J ...
- Linux下配置MySQL需要注意的几点
1.为mysql加上连接数,linux下最大能允许8000个mysql连接. 经验下,设置为3000 [mysqld] max_connections=3000
- ***PHP $_FILES函数详解 + PHP文件上传 move_uploaded_file() 参数的正确写法
PHP $_FILES函数详解 在PHP中上传一个文件建一个表单要比ASP中灵活得多.具体的看代码. 如: 复制代码代码如下: <form enctype="multipart/fo ...
- #CSS margin-top父元素下落
[我的解决方法] 给该父元素添加如下代码 border-top: 1px solid rgba(0,0,0,0); box-sizing:border-box; [原因] css2.1盒模型中规定的内 ...
- intellj idea show "run dashboard" panel
workspace.xml edit this point <component name="RunDashboard"> <option name=" ...
- Mysql中count(*)和limit同时使用的问题
1.带有count的sql语句只会返回一条记录 , 结果如下图: 2.带有limit的sql语句是最后执行的 , 以上sql语句将返回空行,因为count(*)只会使sql语句产生一条结果记录,所以后 ...
- SQLTransientConnectionException: HikariPool-1 - Connection is not available, request timed out after 30001ms.
SQLTransientConnectionException: HikariPool-1 - Connection is not available, request timed out after ...
- 小成就之解决调用spring中FileSystemXmlApplicationContext路径问题
此文写下调用spring过程中遇到的一个问题!或许对于入行的人一看觉得我很傻逼吧,这问题谁都会了!但我觉得对于新手(自已)来说,算是一个好思路与好办法! 问题: 对于 test_aa ta = (te ...