快捷導(dǎo)航

淺談window.onbeforeunload() 事件調(diào)用ajax

更新時(shí)間：2016年06月29日 09:10:57 投稿：jingxian

下面小編就為大家?guī)硪黄獪\談window.onbeforeunload() 事件調(diào)用ajax。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

經(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)容了，希望大家多多支持腳本之家~

您可能感興趣的文章: