如何在不重新加载的情况下动态更改URL？

Question

好吧,这就是我要做的事情(我认为谷歌也是这样做的):

情景A:

在页面中,/Main_Page我们说有3个部分.当用户点击A部分"链接"时,section A内容通过AJAX加载并嵌入到页面中.

情景B:

当/Main_Page/Section_A加载时,我们实际上转到同一页面(如在场景A中) - /Main_Page并Section A通过AJAX 加载- 像以前一样.

---

问题 :

我们有两个相同的结果页面,但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-browser(#如果浏览器不支持,它将回退到URL哈希).

这是一个例子:

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

不够兴奋？这是一个鼓励您实现它的演示.

Answer 2

我刚刚找到了一个教程,它对我有用,

$('a').click(function(){
var value = $(this).attr('id');
window.location.hash = value; // it appends id to url without refresh
});


$(window).bind('hashchange' function() {
    var newhash = window.location.hash.substring(1) // it gets id of clicked element
    // use load function of jquery to do the necessary...
});

我从http://css-tricks.com/video-screencasts/85-best-practices-dynamic-content/获得了上述代码