如何在不重载的情况下动态更改URL ?

OK, this what I'm trying to do (I think Google mostly does this as well) :

好吧，这就是我想要做的(我认为谷歌也会这么做):

Scenario A :

场景一:

In page /Main_Page let's say there are 3 sections. When user clicks on section A "link", section A's content is loaded through AJAX and embedded into the page.

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

Scenario B :

场景2:

When /Main_Page/Section_A is loaded, we practically go to the very same page (as in scenario A) - /Main_Page and load Section A via AJAX - as before.

当/Main_Page/Section_A被加载时，我们实际上会像以前一样访问相同的页面(如场景A) - /Main_Page并通过AJAX加载Section A。

The problem :

存在的问题:

We've got 2 identical resulting pages, but the URL is different (in the first case it'll be just /Main_Page, while in the second it will be /Main_Page/Section_A).

我们得到了两个相同的结果页面，但是URL是不同的(在第一种情况下是/Main_Page，而在第二种情况下是/Main_Page/Section_A)。

What I want to do :

我想做的是:

In Scenario A, after loading Section A via AJAX, how should I do it so that the appearing URL (in the browser address bar) is /Main_Page/Section_A (or anything else for that matter), without any sort of redirecting, page reloading, etc?
在场景A中，在通过AJAX加载Section A之后，我应该如何做才能使出现的URL(在浏览器地址栏中)是/Main_Page/Section_A(或者其他类似的东西)，而不进行任何重定向、页面重加载等等?

2 个解决方案

#1

Your problem can be solved by implementing the History API, especially by using the pushState() method. I recommend reading about it in MDN. There's also an all-in-one solution called History.js, it will help you implement it x-browser easily (It will fallback to URL hashes # if the browser doesn't support it).

您的问题可以通过实现History API来解决，特别是通过使用pushState()方法。我建议在MDN上阅读它。还有一种“历史”的一体式解决方案。它将帮助您轻松地实现它x-browser(如果浏览器不支持它，它将退回到URL散列#)。

Here's an example:

这里有一个例子:

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

Not excited enough? Here's a demo that will encourage you to implement it.

不够兴奋?下面的演示将鼓励您实现它。

#2

I just found a tutorial and it worked for me,

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

$('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...
});

i got the above code from http://css-tricks.com/video-screencasts/85-best-practices-dynamic-content/

上面的代码来自http://css- phs.com/video screencasts/85-best practice -dynamic-content/

#1