全站Ajax后退有兩種方法，瀏覽器后退按鈕加入歷史鏈接。其中一種是常規的Ajax后退，這種后退是帶有ajax效果的，要重新請求歷史鏈接頁面。另一種是將歷史數據保存，后退時取出緩存的數據即可。后者比前者效率要高，所以速度也快,就跟平常無ajax的頁面后退一樣。

下面就是介紹這種方法，與此同時我們還要解決Chrome瀏覽器首次載入網站時出現的AJAX效果重載(reload)的現象。

我們需要兩個函數，以及對其中一個函數進行全局變量初始化，要添加進入js的主要代碼如下：

// 初始化載入-全局變量

$(document).ready(function(){

bind_popstate_once(); // 頁面載入初始一次(解決Chrome首次載入出現ajax效果的問題)

});

//函數：更新瀏覽器歷史緩存(用于瀏覽器后退)

function update_page_historyState(){

history.replaceState( // 刷新歷史點保存的數據，給state填入正確的內容

{?? ?url: window.document.location.href,

title: window.document.title,

html: $('#left').prop('outerHTML'), // 抓取主體部分outerHTML用于呈現新的主體。也可以用這句 html: $(document).find('#left').html()

}, window.document.title, document.location.href);

}

//函數：頁面載入初始一次，解決Chrome瀏覽器初始載入時產生ajax效果的問題

function bind_popstate_once(){

window.addEventListener( 'popstate', function( e ){? //監聽瀏覽器后退事件

if( e.state ){

document.title = e.state.title;

$('#left').html( e.state.html ); //也可以用replaceWith ，最后這個html就是上面替換State后里面的html值

$.featureList($("#sl-posts li a"),$("#output li"), {start_item:0});// 重載幻燈片-1

//返回錨點(頂部)

//var anchor = location.hash.indexOf('#'); // 用indexOf檢查location.href中是否含有'#'號，如果沒有則返回值為-1

//if (anchor == -1) { // 若不含#號

//?? ?body_am(0); // 直接返回頂部

//} else {

//?? ?anchor = window.location.hash.substring(anchor + 1);

//?? ?body_am(anchor);

//}

}

});

}

接下來是ajax事件內success: function(data){ ... }內利用到html5的API —— pushState提交鏈接到歷史中，一般添加到success的最后：

if (msg != 'back' && msg != 'comment') { //? 不為后退 也 不為評論回復時

var state = { // 設置state參數

url: paraUrl,

title: $(data).filter("title").text(),

html: $(data).find("#left").html(),

};

// 將當前url和歷史url添加到瀏覽器當中，用于后退。里面三個值分別是: state, title, url

window.history.pushState(state, $(data).filter("title").text(), historyUrl);

}

(若少了這個或window.history.pushState的三個值有誤，有可能無法后退或無法前進)

上面是兩個函數，update_page_historyState()函數用在ajax加載時，因為它是更新歷史頁面緩存的，要放在pushState事件之前，這樣也可以加入 beforesend 里面。 以上基本上就全部OK了，當然，返回頂部事件隨個人喜好加，上面注釋位置里已經有返回錨點了。

2014-10-14補充：值得注意的是，如果#left里面加載有其他js的插件效果，比如幻燈片，那么就需要在bind_popstate_once()函數里面重載一遍，和ajax的重載一個道理。

2014-10-15補充：點擊側欄的評論切換頁面后發現點擊其他鏈接時地址欄不會變，只有頁面改變，這是由于返回錨點函數引起的，檢查鏈接中帶有#號的問題，將返回錨點放在complete里面即可，也就是window.history.pushState的后面。

總結

以上是生活随笔為你收集整理的ajax 浏览器后退,全站Ajax浏览器后退方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。