Question

我的应用程序中的典型页面包含允许用户使用AJAX快速加载某些内容的各种请求。例如，单击标题中的主导航链接会加载整个内容部分，单击标签加载子部分等等。

因为所有这些“区域”实际上是页面，然后使用jquery进行切割以仅加载所需的div等，然后可以在URL处访问它们（如果用户关闭了JS或打开了链接新标签）。因此，我使用https://github.com/browserstate/History.js/动态更改URL和标题，以便用户可以将当前页面加入书签，即使他们已使用AJAX加载它。

然而问题是当用户想要在他们的浏览器上使用来回按钮时，这意味着代码需要知道前一页面的URL并且还知道要运行哪个ajax调用，例如主导航或其中一个标签。插件可以成功地将url和title更改回上一页，因此它存储在各种类型的内存中，但这是运行正确的Ajax调用的情况。关于如何处理这种情况的任何想法？

进一步解释：

$('.globalTabs li a').live('click', function (e) {

e.preventDefault();

$.ajax({
                url: $(this).attr('href'),
                success: function (responseHtml) {
                    $('.mainContent').html(responseHtml);
                    History.replaceState(null, $(responseHtml).filter('title').text(), url);
                }
            });

});


$('.localTabs li a').live('click', function (e) {

e.preventDefault();

$.ajax({
                url: $(this).attr('href'),
                success: function (responseHtml) {
                    $('.localContent').html(responseHtml);
                    History.replaceState(null, $(responseHtml).filter('title').text(), url);
                }
            });

});

这两个ajax请求都会更改网址并将内容加载到页面上的不同区域。但是当用户点击来回按钮时，我需要它将内容更改回以前的内容。

例如，如果我去/About/Team本地并来自/About，当我点击后退按钮时，它会将我带回该页面并仅加载本地内容。

那我该怎么办呢？该插件显然支持知道以前的URL和标题，但这只是再次加载ajax调用和正确的ajax调用的情况！

由于

Answer 1

使用History.pushState（）而不是History.replaceState（）和listen event window.onpopstate

window.onpopstate = function(event) { 
    alert("location: " + document.location);
    console.log(event, event.state);
    // event.state - the state object, what you can save with
    // History.pushState(myState, $(responseHtml).filter('title').text(), url);
}

更多信息：

使用HTML5 History API在一个页面上发出多个AJAX请求

1 个答案: