更改URL而不重新加载

Question

我有时会在某些网站上看到像Facebook或谷歌的Play Store，通过点击链接更改网址（不是 #blah ），但是网站没有重装。我可以使用后退/前进，所以它可能不是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来做到这一点，但还有其他工具可以做同样的事情。它与其中包含#的URL大致相同，除了它们除去哈希。 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/。