淺談window.onbeforeunload() 事件調(diào)用ajax
經(jīng)常有這樣的需求,就是在離開某個web頁面時,用戶不一定點注銷,這樣會導(dǎo)致會話不能及時銷毀。為實現(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可以使用的權(quán)限在Friefox中被限制,因此通過
if(userAgent.indexOf("msie")>-1) { //IE }else { //FireFox Chrome }
這段代碼來判斷當(dāng)前瀏覽器類型。
針對Firefox、Chrome的兼容代碼如下:
$.ajax({ url: logoutURL, async: false });
async需要設(shè)為false,即為同步,不能采用true異步的方式,否則請求有可能發(fā)不出去。其實Chrome也適用于下面針對IE的代碼,在關(guān)掉瀏覽器時會自動發(fā)送注銷命令,但是點瀏覽器的刷新按鈕時也希望能自動注銷用戶時,Chrome就只能采用上面這行代碼才能發(fā)出注銷請求
針對IE的兼容代碼如下:
$.ajax({ url: logoutURL, crossDomain: true, async: false, dataType: "jsonp" });
crossDomain設(shè)置為true是為了解決跨域訪問問題,如果不存在這個問題,這個屬性可以忽略。async屬性最好也設(shè)成false,true也可以。dataType:"jsonp"這個屬性也是為解決跨域訪問問題,和crossDomain配合使用,不存在跨域問題,這兩個屬性可省略。
以上代碼在IE9、Chrome27、Firefox21測試通過。
以上就是小編為大家?guī)淼臏\談window.onbeforeunload() 事件調(diào)用ajax(標(biāo)題)全部內(nèi)容了,希望大家多多支持腳本之家~
相關(guān)文章
jquery 正整數(shù)數(shù)字校驗正則表達(dá)式
本文主要介紹了jquery正整數(shù)數(shù)字校驗正則表達(dá)式的方法。具有一定的參考價值,下面跟著小編一起來看下吧2017-01-01jQuery插件HighCharts繪制2D帶Label的折線圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D帶Label的折線圖效果,結(jié)合實例形式分析了jQuery圖形繪制插件HighCharts實現(xiàn)折線圖效果的具體操作步驟與相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jQueryMobile之Helloworld與頁面切換的方法
這篇文章主要介紹了jQueryMobile之Helloworld與頁面切換的方法,實例分析了jQueryMobile的基礎(chǔ)用法,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02