更新

http://www.bootcdn.cn/jquery.pjax/

簡介

pjax是一個jQuery插件，使用ajax和pushState技術提供快速的瀏覽體驗與真正的永久鏈接、網頁標題、以及瀏覽器的后退前進按鈕操作。

pjax通過抓取HTML從您的服務器通過Ajax和更換容器頁面上的HTML內容會與Ajax。然后更新無需重新加載你的網頁的布局或任何資源使用pushstate瀏覽器的當前URL（JS，CSS），提供了一個快速的外觀，全頁面加載。但它確實就是Ajax和pushstate。

點擊這里查看pushState的瀏覽器支持情況。

概述

pjax不是全自動的。您需要設置和指定一個包含在您的頁面上的元素，當您瀏覽您的網站時將被替換。

?

?

// ------------------------------------------------------------------------------------------------

在ajax請求中，不能更新地址欄，地址欄上的“前進”和“后退”按鈕就失效了,帶來了另外一種糟糕的用戶體驗。

解決方案如下：

方案一：使用window.?Onhashchange?事件

如下面Html片段，點擊不同的連接，在mainPanel中加載不同的頁面：

解決方案如下：

<ul class="menu"><li><a href="/home/index#page=1">page1</a></li><li><a href="/home/index#page=2">page2</a></li><li><a href="/home/index#page=3">page3</a></li> </ul><div id="mainPanel"> </div>

?

首先寫一個方法來獲取當前url中指定key的hash值，如下：

?

<script type="text/javascript">//獲取指定key的hash值function getHash(key, url) {var hash;if (!!url) {hash = url.replace(/^.*?[#](.+?)(?:\?.+)?$/, "$1");hash = (hash == url) ? "" : hash;} else {hash = self.location.hash;}hash = "" + hash;hash = hash.replace(/^[?#]/, '');hash = "&" + hash;var val = hash.match(new RegExp("[\&]" + key + "=([^\&]+)", "i"));if (val == null || val.length < 1) {return null;} else {return decodeURIComponent(val[1]);}}</script>

?

使用onhashchange事件觸發ajax請求： <script?type="text/javascript">

到這里工作已經完成了80%，為什么是80%呢，這里面還有一個問題：

當你直接在瀏覽器(新開的標簽頁)的地址欄里輸入這樣的地址：http://localhost:3859/home/index#page=3?或者通過QQ發給你的好友，看到的并不是如你所想的應該是page=3的內容，而是http://localhost:3859/home/index?的內容。原因很簡單——頁面加載的時候不會觸發onhashchange事件。

所以我們要在上面的代碼追加一行：

function loadPanel() {var page = getHash("page");if (page == 1) {$("#mainPanel").load("/home/page1");}if (page == 2) {$("#mainPanel").load("/home/page2");}if (page == 3) {$("#mainPanel").load("/home/page3");}}$(window).bind("hashchange", loadPanel);</script> $(loadPanel); //或者 $(function(){ $(window).trigger("hashchange"); });

?

onhashchange?事件location.hash發生改變的時候觸發，可以很好解決AJAX刷新后退/前進鍵失效的問題，是一個新的事件，

目前chrome ,firefox,Opera,? Safari,IE8及以上版本瀏覽器都兼容。

其實對于那些死抱著IE6,IE7?不放的用戶，咱也沒必要給他們提供這樣的用戶體驗。

?

方案二：使用jQuery.History.js

對于要兼容IE6、IE7的情況，筆者一直使用jquery.history.js?這個插件（http://plugins.jquery.com/history/）。

這個插件它會去判斷瀏覽器是否支持onhashchange事件，如果不支持，就定時(每個100毫秒)循環判斷hash有沒有變化，從而執行相應處理。

如：

<script src="/Scripts/jquery.history.js" type="text/javascript"></script> <script type="text/javascript">$(function () {$.history.init(function (hash) {var page = getHash("page");if (page == 1) {$("#mainPanel").load("/home/page1");}if (page == 2) {$("#mainPanel").load("/home/page2");}if (page == 3) {$("#mainPanel").load("/home/page3");}});}); </script>

?

另外，這個插件已經不再繼續更新維護了。

?

方案三：jquery.ba-hashchange.js

jquery.ba-hashchange.js(http://benalman.com/projects/jquery-hashchange-plugin/)

這個插件的實現原理和jquery.history.js?完全一樣。循環間隔為50毫秒。

它overwrite?了window.hashchange事件，使其能夠兼容全部瀏覽器。

使用如下：

<script src="/Scripts/jquery.ba-hashchange.js" type="text/javascript"></script> <script type="text/javascript">$(window).hashchange(function () {var page = getHash("page");if (page == 1) {$("#mainPanel").load("/home/page1");}if (page == 2) {$("#mainPanel").load("/home/page2");}if (page == 3) {$("#mainPanel").load("/home/page3");}});$(window).hashchange(); </script>

Ajax保留瀏覽器歷史的解決方案

轉載于:https://www.cnblogs.com/cssfirefly/p/5175329.html

總結

以上是生活随笔為你收集整理的pjax 历史管理 jQuery.History.js的全部內容，希望文章能夠幫你解決所遇到的問題。

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