更改網址而無需重新加載

Question

我有時會在某些網站上看到類似Facebook或Google的Play Store，即通過點擊鏈接url更改（不包括#blah），但wohle網站不會重新加載。我可以使用後退/前進，所以它不會是JavaScript，我想。

有人可以說我如何在網站上實現該功能嗎？謝謝

Answer 1

它使用pushState，它使用JavaScript和HTML5與pushState兼容的瀏覽器完成。下面是一些文檔：https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

從這些文檔中創建報價：

假設http://mozilla.org/foo.html執行下面的JavaScript：

var stateObj = { foo: "bar" }; 
history.pushState(stateObj, "page 2", "bar.html"); 

這將導致URL欄以顯示 http://mozilla.org/bar.html ，但不會導致瀏覽器加載 bar.html甚至檢查bar.html是否存在。

可以通過這種方式更改網址，並使用javascript呈現新頁面。我通過使用Backbone.js來做到這一點，但還有其他工具可以做同樣的事情。這些技術與其中的#這些網址大致相同，只是他們擺脫了散列。 Backbone.js默認使用#，但可以配置爲使URL顯示正常。

這裏是一個SO question about how to do this using Backbone

Answer 2

另一種方法可以做到這一點是AngularJS。正如在上面的評論中所說的，這將使用AJAX獲取新數據來顯示，然後使用javascript更改頁面的內容，而不用加載新的URL。

Answer 3

對於不支持ie8等htmll5的瀏覽器，可以使用模擬html5 pushstate方法的庫https://github.com/browserstate/history.js/。