ajax與HTML5 history pushState/replaceState實例

原創

2020-02-22 14:39

三點：

精力總是有限的，昨天一衝動，在上海浦東外環之外訂了個90米的房子，要借錢籌首付、貸款和領證什麼的。HTML5 history相關知識點啪啦啪啦講起來也是一條又臭又長的裹腳布，精氣神實在不夠用，這裏，直接一個實例。

衆所周知，Ajax可以實現頁面的無刷新操作——優點；但是，也會造成另外的問題，無法前進與後退！曾幾何時，Gmail似乎藉助iframe搞定，如今，HTML5讓事情變得如同過家家般簡單。

當執行Ajax操作的時候，往瀏覽器history中塞入一個地址（使用pushState）（這是無刷新的）；於是，返回的時候，通過URL或其他傳參，我們就可以還原到Ajax之前的模樣。

本demo所展示的就是ajax的內容載入與地址欄的前進與後退，典型應用，對於熟悉相關知識點很有幫助。

demo結構大致如下：左邊導航菜單，右側詳細內容。

如果我們想偷懶，導航直接URL地址，點擊刷新得了。但頭尾內容都是一樣的，刷新總顯得浪費。從體驗上講，點擊導航，右側Ajax局部刷新是更優的策略。

Ajax局部刷新小菜，稍有經驗都能輕鬆應對。現在如果提出如下需求：每次ajax刷新就如果頁面刷新一樣，可以後退查看之前內容，怎麼破？

我的策略如下：

每次手動點擊左側的菜單，我將Ajax地址的查詢內容(?後面的)附在demo HTML頁面地址後面，使用history.pushState塞到瀏覽器歷史中。
瀏覽器的前進與後退，會觸發window.onpopstate事件，通過綁定popstate事件，就可以根據當前URL地址中的查詢內容讓對應的菜單執行Ajax載入，實現Ajax的前進與後退效果。
頁面首次載入的時候，如果沒有查詢地址、或查詢地址不匹配，則使用第一個菜單的Ajax地址的查詢內容，並使用history.replaceState更改當前的瀏覽器歷史，然後觸發Ajax操作。

於是，你會看到：

頁面首次載入，雖然我們訪問的URL的後綴是光禿禿的.html，但是，實際URL最後是：

因爲被history.replaceState擺了一道。
鼠標點擊左邊的任意一個菜單，會發現，右側內容雖然是Ajax載入，但是，頁面的URL地址卻變了，例如，點擊寶山區：

因爲歷史記錄被history.pushState插了一刀。
此時，我們點擊地址欄的後退按鈕，就是這個：

奇蹟般的，頁面無刷新的，又回到了浦東菜單：

因爲window.onpopstate讓菊花刀又拔了出來。

history.pushState
菊花插一刀之意，用法舉例：
```
history.pushState({}, "頁面標題", "xxx.html");
```
~~history.pushState~~history.replaceState
換把菊花刀之意，用法舉例：
```
history.replaceState(null, "頁面標題", "xxx.html");
```

window.onpopstate
在菊花刀拔插的時候……，用法舉例：

window.addEventListener("popstate", function() {
    var currentState = history.state;
    /*
     * 該幹嘛幹嘛
    */											
});

瀏覽器兼容性表：

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
replaceState, pushState	5	4.0 (2.0)	10	11.50	5.0
history.state	18	4.0 (2.0)	10	11.50	6.0

恩，就這些！

發佈了60 篇原創文章 · 獲贊 51 · 訪問量 32萬+

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.