[https://developer.mozilla.org/zh-CN/docs/Web/API/History_API](https://developer.mozilla.org/zh-CN/docs/Web/API/History_API) [toc] ## 異步【誤】 >[danger] 是因為pushState不會觸發popState pushState是異步的，so，如果你直接在下面go，此時還沒有記錄，也就不會觸發popState ``` window.onpopstate = function(event) { console.log(history.state) }; // location.href = '#123' history.pushState({a:1},'1','?123') history.pushState({b:1},'2','?234') // history.go(-1); //這樣是無效的 document.documentElement.onclick = function(e){ history.go(-1) } ``` ## hash hash也會產生歷史記錄， 但如果你使用的是`location.href`(系列)這樣設置的hash，**即使**同一個頁面多次設置hash，只會產生一次記錄，也就只會觸發一次popstate(設置hash是**同步**的) ``` window.onpopstate = function(event) { console.log(1) // console.log(history.state) }; location.href = '#123' location.href='#hash1122' document.documentElement.onclick = function(e){ history.go(-1) } <<< 1 ``` 但如果你使用的是`pushState({...},'','#123')`設置hash，則調用幾次就會產生幾次記錄 --- ## 你可以用 go() 方法載入到會話歷史中的某一特定頁面， 通過與當前頁面相對位置來標志 (當前頁面的相對位置標志為0). >history.pushState({},'','./abc') > >會改變url，但不會立刻加載，需要調用go()才會加載，才會觸發onpopstate > >pushState支持相對路徑 > >push的url只支持同源，否則報錯 調用history.pushState()或者history.replaceState()不會觸發popstate事件. popstate事件只會在瀏覽器某些行為下觸發, 比如點擊后退、前進按鈕(或者在JavaScript中調用history.back()、history.forward()、history.go()方法). ``` 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} ```