轉載 https://www.cnblogs.com/jefferyE/p/7063018.html
用戶訪問網頁的歷史記錄通常會被保存在一個類似於棧中，即history對象，點擊返回就出棧，跳下一頁就入棧。 它提供了方法操作頁面的前進和後退：
-
window.history.back() 返回到上一個頁面
-
window.history.forward() 進入到下一個頁面
-
window.history.go([delta]) 跳轉到指定頁面
HTML5 對History Api 進行了增強，新增了兩個Api和一個事件，分別是pushState、replaceState 和 onpopstate
pushState是往history對象裏添加一個新的歷史記錄，即壓棧。
replaceState 是替換history對象中的當前歷史。
當點擊瀏覽器後退按鈕或js調用history.back都會觸發onpopstate事件, 與其類似的還有一個事件: onhashchange 。
onhashchange是老API, 瀏覽器支持度高, 本來是用來監聽hash變化的, 但可以被利用來做客戶端前進和後退事件的監聽，onpopstate是專門用來監聽瀏覽器前進後退的, 不僅可以支持hash, 非hash的同源url也支持。
如下：
一、onhashchange 事件在當前 URL 的錨部分(以 '#' 號爲開始) 發生改變時觸發 。
錨部分的實例：指定當前 URL 爲
http://www.example.com/test.htm#part2 - 這個 URL 中的錨部分爲 #part2。
你可以使用以下方式調用事件:
1、通過設置Location 對象 的 location.hash 或 location.href 屬性修改錨部分。
2、使用不同書籤導航到當前頁面（使用"後退" 或"前進"按鈕）
3、點擊鏈接跳轉到書籤錨
demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>該實例演示瞭如何使用 addEventListener()方法 向 body 元素中添加 "onhashchange" 事件。</p>
<p>點擊按鈕修改當前 URL 的錨部分爲 #part5</p>
<button onclick="changePart()">點我</button>
<p id="demo"></p>
<script>
// 使用 location.hash 屬性來修改錨部分
function changePart() {
location.hash = "part5";
var x = "錨部分現在爲: " + location.hash;
document.getElementById("demo").innerHTML = x;
}
window.addEventListener("hashchange", myFunction);
function myFunction() {
alert("錨部分已修改！");
}
</script>
</body>
</html>
二、window.onpopstate 是popstate事件在window對象上的事件處理程序.
每當處於激活狀態的歷史記錄條目發生變化時,popstate事件就會在對應window對象上觸發. 如果當前處於激活狀態的歷史記錄條目是由history.pushState()方法創建,或者由history.replaceState()方法修改過的, 則popstate事件對象的state屬性包含了這個歷史記錄條目的state對象的一個拷貝.
調用history.pushState()或者history.replaceState()不會觸發popstate事件. popstate事件只會在瀏覽器某些行爲下觸發, 比如點擊後退、前進按鈕(或者在JavaScript中調用history.back()、history.forward()、history.go()方法).
當網頁加載時,各瀏覽器對popstate事件是否觸發有不同的表現,Chrome 和 Safari會觸發popstate事件, 而Firefox不會.
語法：window.onpopstate = funcRef; funcRef 是個函數名.
demo:
假如當前網頁地址爲http://example.com/example.html,則運行下述代碼後
window.onpopstate = function(event) {
alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//綁定事件處理函數.
history.pushState({page: 1}, "title 1", "?page=1"); //添加並激活一個歷史記錄條目 http://example.com/example.html?page=1,條目索引爲1
history.pushState({page: 2}, "title 2", "?page=2"); //添加並激活一個歷史記錄條目 http://example.com/example.html?page=2,條目索引爲2
history.replaceState({page: 3}, "title 3", "?page=3"); //修改當前激活的歷史記錄條目 http://ex..?page=2 變爲 http://ex..?page=3,條目索引爲3
//history.back(); // 彈出 "location: http://example.com/example.html?page=1, state: {"page":1}"
//history.back(); // 彈出 "location: http://example.com/example.html, state: null
//history.go(2); // 彈出 "location: http://example.com/example.html?page=3, state: {"page":3}
即便進入了那些非pushState和replaceState方法作用過的(比如http://example.com/example.html)沒有state對象關聯的那些網頁, popstate事件也仍然會被觸發.