HTML5實作無重繪修改URL-有解無憂

前言

今天在做一個vue的搜索功能，需要從搜索結果頁面跳轉到細節頁面，然后點擊回傳還能回傳到剛剛的結果頁面，如果只用window.history.go(-1)當然會重新重繪搜索頁面，當然是不行的，

我嘗試了倆種方式來修改url:

window.location.href,拼接一個搜索的key值，點擊搜索的同時，重繪了頁面，url改變了，功能是實作了，可是bug來了...，搜索頁面閃爍后才進入結果頁，而結合不跳轉頁面就不會發生閃爍的情況，所以當頁面重繪時，vue實體都會被重新加載，
window.location.hash,url中#為網頁中的一個位置，當讀取此url時，頁面會自動滾動到錨點處，這種方法不會向服務器發送請求，也不會多載頁面，可讀寫，讀取時，可以用來判斷網頁狀態是否改變；寫入時，則會在不多載網頁的前提下，創造一條訪問歷史記錄，

新增API

百度后發現HTML5為window.history物件引入了兩個新的api是history.pushState() 和 history.replaceState() 方法，它們分別可以添加和修改歷史記錄條目，這些方法通常與window.onpopstate事件配合使用，兩種api都能改變當前的url，不同的是，pushState在瀏覽器中創建一條新的歷史記錄，而history.replaceState僅僅替換當前地址為指定url，

HTML5 新增的歷史記錄 API 均可以實作無重繪更改地址欄鏈接，配合 AJAX 完全可以做到無重繪跳轉，他們的作用非常大，可以做到改變網址卻不需要重繪頁面，這個特性后來用到了單頁面應用中比如：vue-router，react-router-dom里面，那么下面介紹新API的使用方法

pushState方法

上面提到的這套 API 提供一種「人為操縱」瀏覽器歷史記錄的方法，

我們可以將瀏覽器歷史記錄可以看作一個「堆疊」，堆疊是一種后進先出的結構，可以把它想象成一摞盤子，用戶每點開一個新網頁，都會在上面加一個新盤子，叫「入堆疊」，用戶每次點擊「后退」按鈕都會取走最上面的那個盤子，叫做「出堆疊」，而每次瀏覽器顯示的自然是最頂端的盤子的內容，

語法:window.history.pushState(state, title, url);

執行pushState函式之后，會往瀏覽器的歷史記錄中創建一條新記錄，同時改變地址欄的地址內容，它可以接收三個引數，按語法順序分別為：

一個state物件或者字串，用于描述新記錄的一些特性，這個引數會被一并添加到歷史記錄中，以供以后使用，這個引數是開發者根據自己的需要自由給出的，該值是后期可以通過history.state;獲取當前頁面的引數,
一個字串，代表新頁面的標題，當前基本上所有瀏覽器都會忽略這個引數，
一個字串，代表新頁面的相對地址，（必須與當前頁面處在同一個域，）

簡單例子：假設當前頁面為renfei.org/，打開控制臺執行下面的 JavaScript 陳述句：

window.history.pushState({id: 1,name: "profile1"}, "My Profile", "/profile/");  //第一二引數可忽略設定為null

之后，地址欄的地址就會變成renfei.org/profile/，但同時瀏覽器不會重繪頁面，甚至不會檢測目標頁面是否存在，

replaceState方法

有時，你希望不添加一個新記錄，而是替換當前的記錄，倆者區別在于 replaceState() 是修改了當前的歷史記錄項而不是新建一個，

replaceState和pushState原理一樣使用也一樣,最常用的方法：

window.history.replaceState({id: 1,name: "profile"},'下載','download?id=1');

特點：replaceState不會加入到歷史記錄里面,用history.go(-1)會跳過當前頁面相當于是history.go(-2)，

popstate事件

當頁面加載時，它可能會有一個非空的state物件，這可能發生在當頁面設定一個state物件(使用pushState或者replaceState)之后用戶重啟了瀏覽器，當頁面重新加載，頁面將收到onload事件，但不會有popstate事件，然而，如果你讀取history.state屬性，將在popstate事件發生后得到這個state物件

var currentState = history.state; //得到當前頁面設定的history.pushState的state物件引數值

呼叫 history.pushState() 或者 history.replaceState() 不會觸發 popstate 事件， popstate事件只會在瀏覽器某些行為下觸發，比如點擊后退、前進按鈕(或者在JavaScript中呼叫history.back()、history.forward()、history.go()方法)，

例子：假設當前頁面地址是http://example.com/index.html

window.onpopstate = function(event) {
  alert("location: " + document.location.href + ", state: " + JSON.stringify(event.state));//拿到history.state物件值
};
//系結事件處理函式. 
history.pushState({page: 1}, "title 1", "?page=100");    //添加并激活一個歷史記錄條目 http://example.com/index.html?page=100,條目索引為1    //history.state為{page: 1}
history.pushState({page: 2}, "title 2", "?page=200");    //添加并激活一個歷史記錄條目 http://example.com/index.html?page=200,條目索引為2
history.replaceState({page: 3}, "title 3", "?page=300"); //修改當前所在頁面激活的歷史記錄條目 http://ex..?page=200 變為 http://ex..?page=300,條目索引為3

history.back(); // 彈出 "location: http://example.com/index.html?page=100, state: {"page":1}"
history.back(); // 彈出 "location: http://example.com/index.html, state: null
history.go(2);  // 彈出 "location: http://example.com/index.html?page=300, state: {"page":3}

pushState方法與設定hash值的區別

在某種意義上，呼叫 pushState() 與設定 window.location = "#foo" 類似，二者都會在當前頁面創建并激活新的歷史記錄，但 pushState() 具有如下幾條優點：

新的 URL 可以是與當前URL同源的任意URL ，而設定 window.location 僅當你只修改了哈希值時才保持同一個檔案，
如果需要，可以不必改變URL就能創建一條歷史記錄，而設定 window.location.hash = "#foo";只有在當前哈希不是 #foo 的情況下，才會創建一個新的歷史記錄項，
我們可以為新的歷史記錄項關聯任意資料，而基于哈希值的方式，則必須將所有相關資料編碼到一個短字串里，

需要注意的是通過history.pushState修改網頁的URL地址，在配合相關代碼顯示隱藏相應界面便可以實作單頁面多界面相互操作，該方法比直接訪問URL地址速度快，執行效率高，UI體驗好，但會增加頁面的復雜性及耦合性，要視實際情況而定，一般都用在dialog彈出框上，

應用：全站 AJAX，并使瀏覽器能夠抓取 AJAX 頁面

這個可以干啥用？一個比較常用的場景就是，配合 AJAX，

假設一個頁面左側是若干導航鏈接，右側是內容，同時導航時只有右側的內容需要更新，那么重繪整個頁面無疑是浪費的，這時我們可以使用 AJAX 來拉取右面的資料，但是如果僅僅這樣，地址欄是不會改變的，用戶無法前進、后退，也無法收藏當前頁面或者把當前頁面分享給他人；搜索引擎抓取也有困難，這時，就可以使用 HTML5 的 History API 來解決這個問題，

思路：首先系結click事件，當用戶點擊一個鏈接時，通過preventDefault函式防止默認的行為（頁面跳轉），同時讀取鏈接的地址（如果有 jQuery，可以寫成$(this).attr('href')），把這個地址通過pushState塞入瀏覽器歷史記錄中，再利用 AJAX 技術拉取（如果有 jQuery，可以使用$.get方法）這個地址中真正的內容，同時替換當前網頁的內容，

為了處理用戶前進、后退，我們監聽popstate事件，當用戶點擊前進或后退按鈕時，瀏覽器地址自動被轉換成相應的地址，同時popstate事件發生，在事件處理函式中，我們根據當前的地址抓取相應的內容，然后利用 AJAX 拉取這個地址的真正內容，呈現，即可，

最后，整個程序是不會改變頁面標題的，可以通過直接對document.title賦值來更改頁面標題，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/31363.html

標籤：HTML5

上一篇：搭建Vue開發環境

下一篇：求一個能檢測局域網一個或者多個IP的某個埠是否開放的網頁原始碼