小编典典

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

ajax

好的,这就是我想要做的(我认为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(或与此相关的任何其他内容),而无需进行任何重定向,页面重新加载等?

阅读 280

收藏
2020-07-26

共1个答案

小编典典

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

这是一个例子:

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

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

2020-07-26