經常有這樣的需求,就是在離開某個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,(轉載者補充:這點很重要,不改可能會出現在本地調試OK上服務器後不可以的問題)即爲同步,不能採用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測試通過。