32

好的，这就是我想要做的（我认为谷歌也大多这样做）：

方案 A：

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

方案 B：

加载后/Main_Page/Section_A，我们实际上会转到同一个页面（如场景 A 中） -并像以前一样通过 AJAX/Main_Page加载。Section A

问题 ：

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

我想做的事 ：

  • 在场景 A 中，Section A通过 AJAX 加载后，我应该如何做到这一点，以便出现的 URL（在浏览器地址栏中）是/Main_Page/Section_A（或其他任何事情），没有任何类型的重定向、页面重新加载等？
4

2 回答 2

55

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

这是一个例子：

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

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

于 2012-08-13T11:01:27.027 回答
9

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

$('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/得到了上面的代码

于 2013-07-30T12:18:20.280 回答