更改网址而无需重新加载

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/。