淺談window.onbeforeunload() 事件調用ajax
經常有這樣的需求，就是在離開某個web頁面時，用戶不一定點注銷，這樣會導致會話不能及時銷毀。為實現(xiàn)用戶離開頁面時，自動注銷功能，需要在web頁面的onbeforeunload事件處理函數(shù)中發(fā)送注銷命令。這個地方大多用Ajax實現(xiàn)。有時還涉及到跨域訪問的問題。這個地方就存在瀏覽器的兼容性問題。
瀏覽器在處理這個需求時的不兼容性有如下兩點:
1、處理Ajax時的不兼容性，這里使用jQuery來解決。
2、在發(fā)送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異步的方式，否則請求有可能發(fā)不出去。其實Chrome也適用于下面針對IE的代碼，在關掉瀏覽器時會自動發(fā)送注銷命令，但是點瀏覽器的刷新按鈕時也希望能自動注銷用戶時，Chrome就只能采用上面這行代碼才能發(fā)出注銷請求
針對IE的兼容代碼如下:
$.ajax({ url: logoutURL, crossDomain: true, async: false, dataType: "jsonp" });
crossDomain設置為true是為了解決跨域訪問問題，如果不存在這個問題，這個屬性可以忽略。async屬性最好也設成false，true也可以。dataType:"jsonp"這個屬性也是為解決跨域訪問問題，和crossDomain配合使用，不存在跨域問題，這兩個屬性可省略。
以上代碼在IE9、Chrome27、Firefox21測試通過。
以上就是小編為大家?guī)淼臏\談window.onbeforeunload() 事件調用ajax（標題）全部內容了，希望大家多多支持腳本之家~
相關文章
jquery中利用navigator.userAgent.indexOf來判斷瀏覽器類型，并進行了一下處理，如果不想使用jquery，稍為修改下代碼就可以為自己所用2011-04-04
jQuery實現(xiàn)帶3D切割效果的輪播圖功能示例【附源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)帶3D切割效果的輪播圖功能,結合實例形式分析了jQuery輪播圖相關的界面布局、3D效果實現(xiàn)與事件響應等相關操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2019-04-04
jquery ui dialog ie8出現(xiàn)滾動條的解決方法
jquery ui 的 dialog 在IE8下會出現(xiàn)不該出現(xiàn)的滾動條,在JQUI的FORUM上SEARCH下,發(fā)現(xiàn)也有人碰上,當解決辦法就是把滾動條隱藏2010-12-12
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)上傳圖片前預覽效果功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
jquery 全局AJAX事件使用代碼，需要的朋友可以參考下。2010-11-11
解決jquery appaend元素中id綁定事件失效的問題
下面小編就為大家?guī)硪黄鉀Qjquery appaend元素中id綁定事件失效的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了基于jquery實現(xiàn)鼠標滾輪驅動的圖片切換效果，操作簡單，適合用在產片展示網站中，需要的朋友可以參考下2015-10-10
這篇文章主要介紹了jQuery獲取選中內容及設置元素屬性的方法，需要的朋友可以參考下2014-07-07
這篇文章主要介紹了jQuery中next()方法用法,實例分析了next()方法的功能、定義及獲得匹配元素集合中每個元素緊鄰的同輩元素使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了js+jquery實現(xiàn)圖片裁剪功能的方法以及全部的示例代碼，思路非常好，這里推薦給有需要的小伙伴。2015-01-01