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測試通過。