如何操作瀏覽器歷史記錄並捕獲瀏覽器後退/前進按鈕？

Question

我一直在尋找幾個小時試圖做一個簡單的瀏覽器歷史操作。

我有幾個菜單鏈接，我綁定單擊處理他們。鏈接'href的只是哈希：href="#Home"或href="#About"。

我想，當用戶點擊鏈接以顯示子頁面，而無需重新加載頁面，並更改瀏覽器的URL。

我也試過用pushState的（這個基本的例子），但它不工作： http://jsbin.com/wecubizovu/1/edit?html,js,console

http://jsbin.com/wecubizovu

當我在Chrome運行此，我想到的是，如果用戶點擊鏈接，他將#asd追加到url並且popstate不會更改。爲什麼popstate被觸發？我該如何做到這一點，以便當用戶點擊鏈接時，我將哈希追加到瀏覽器網址，當用戶點擊瀏覽器後退按鈕時，我捕捉到該事件並顯示我想要的頁面？

謝謝！

Answer 1

您的a元素有href的''如果您不阻止默認操作，並且這會以某種方式混淆您想要執行的操作，它仍會執行。 改變你的函數

$("#asd").click(function(e) { 
    e.preventDefault(); 
    alert("jo"); 
    window.history.pushState("", document.title, "#asd"); 
}); 

實現你在找什麼。

編輯：鏈接：http://jsbin.com/sosozeteti

http://jsbin.com/sosozeteti/1/edit?html,js