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

