如何開始使用history.js？

我一直試圖在最後幾個小時學習History.js。我創建了三個非常簡單的測試文件，但我似乎無法獲得任何工作。這裏是我的三個文件的內容。如何開始使用history.js？

history.html：

<!doctype html> 
<html> 
    <head> 
     <title>History Test</title> 
     <script type="text/javascript" src="jquery-1.10.1.min.js"></script> 
     <script type="text/javascript" src="jquery.history.js"></script> 
     <script type="text/javascript" src="history.js"></script> 
    </head> 
    <body> 
     <a href="about.html">about</a> 
    </body> 
</html>

history.js：

$(document).ready(function() { 
    History.Adapter.bind(window, 'statechange', handleStateChange); 
}); 

function handleStateChange() { 
    alert("State changed..."); 
}

about.html：

<!doctype html> 
<html> 
    <head> 
     <title>About</title> 
    </head> 
    <body> 
     About... 
    </body> 
</html>

當我點擊 '關於' 鏈接，爲什麼不statechange事件火災或我的handleStateChange（）函數執行？

來源

2013-06-19 Rob Johansen

我會回答我自己的問題，以防別人幫助別人。我誤以爲只要瀏覽器的URL發生變化（例如點擊鏈接或點擊後退按鈕），'statechange'事件就會觸發。我發現的是，'statechange'只有在你將某些東西推到歷史記錄上時纔會發生。所以，我更新了我的JavaScript來一個監聽器添加到鏈接...

history.js：

$(document).ready(function() { 
    History.Adapter.bind(window, 'statechange', handleStateChange); 
    $("#about").click(function() { 
     History.pushState(null, null, "about.html"); 
    }); 
}); 

function handleStateChange() { 
    alert("State changed..."); 
}

...現在我得到的警報，當我點擊鏈接，當我點擊瀏覽器的返回鍵。

來源

2013-06-20 14:20:48

嗨外星人，你能把你的完整演示給我嗎？我已經完成了你的教學，但沒有警覺。謝謝 –

如何開始使用history.js？

回答

相關問題