如何动态更改URL而无需重新加载？

Question

好的，这就是我想要做的（我认为Google也是这么做的）：

方案A：

在页面中，/Main_Page假设有3个部分。当用户点击“链接”部分时，section A的内容将通过AJAX加载并嵌入到页面中。

方案B：

当/Main_Page/Section_A被加载时，我们实际上去非常相同的页面（如在方案A） - /Main_Page和负载Section A通过AJAX -如前。

问题 ：

我们有2个相同的结果页面，但是URL不同（在第一种情况下，它只是/Main_Page，而在第二种情况下是/Main_Page/Section_A）。

我想做的事 ：

• 在方案A中，Section A通过AJAX 加载后，我该如何做，以使出现的URL（在浏览器地址栏中）为/Main_Page/Section_A（或与此相关的任何其他内容），而无需进行任何重定向，页面重新加载等？

Answer 1

您的问题可以通过实现History API来解决，尤其是通过使用pushState()方法。我建议在MDN中阅读有关它的内容。还有一个名为History.js的多合一解决方案，它将帮助您轻松地实现x浏览器（#如果浏览器不支持，则将回退为URL哈希）。

这是一个例子：

history.pushState('', 'New Page Title', newHREF);

不够兴奋？这是一个鼓励您实施的演示。