浏览器后退按钮导致history.pushState失效

Question

我正在开发一个单页应用程序，每个部分都是通过ajax加载的。主页是一个独立的页面，然后你点击“关于”，就会进入单页应用程序。使用以下代码片段，我已经让每个部分的URL都进行了更改，并且浏览器上的后退和前进按钮也可以正常工作:

$('.down-button').on('click', function() {
        var stateObj = { principles: "about-principles" };
        history.pushState(stateObj, null, "about-principles");
        $('#principles-wrap').scrollintoview({ duration: 1000 });
    });

然而，当您点击返回到主页时，主页不会刷新，您仍然停留在“关于”页面。或者，如果您点击返回到主页的链接，您会得到一个404错误。

我错过了什么？

编辑

这是剩余的代码：

function button_scroll () {
// Call scrollIntoView js file into this 
$.getScript("/js/jquery.scrollintoview.min.js", function() {
    $('.down-button').on('click', function() {
        var stateObj = { principles: "about-principles" };
        history.pushState(stateObj, null, "about-principles");
        $('#principles-wrap').scrollintoview({ duration: 1000 });
    });
    $('.up-button-principles').on('click', function() {
        var stateObj = { mission: "about-mission" };
        history.pushState(stateObj, null, "about-mission");
        $('#mission-wrap').scrollintoview({ duration: 1000 });
    });
    $('.down-button-principles').on('click', function() {
        var stateObj = { snapshot: "about-snapshot" };
        history.pushState(stateObj, null, "about-snapshot");
        $('#snapshot-wrap').scrollintoview({ duration: 1000 });
    });
    $('.up-button-snapshot').on('click', function() {
        var stateObj = { principles: "about-principles" };
        history.pushState(stateObj, null, "about-principles");
        $('#principles-wrap').scrollintoview({ duration: 1000 });
    });
    $('.down-button-snapshot').on('click', function() {
        var stateObj = { people: "about-people" };
        history.pushState(stateObj, null, "about-people");
        $('#people-wrap').scrollintoview({ duration: 1000 });
    });
    $('.up-button-people').on('click', function() {
        var stateObj = { snapshot: "about-snapshot" };
        history.pushState(stateObj, null, "about-snapshot");
        $('#snapshot-wrap').scrollintoview({ duration: 1000 });
    });

});

}

//Dropdown
$(document).ready(function () {
$(window).on('load resize', function () {
    resize_mission();
    resize_principles();
    resize_snapshot();
    resize_people();
    button_scroll();
});
var dropDown = $('.dropdown');
$('h3.about').on('click', function() {
    dropDown.slideDown('fast', function() {
        var url = 'about2.php'
        var stateObj = { mission: "about-mission" };
        history.pushState(stateObj, null, "about-mission");
        $.get(url, function(data) {
            resize_mission();
            resize_principles();
            resize_snapshot();
            resize_people();
            button_scroll();
        });
    });
});

这是我所做的全部内容。没有插件。

});

- reknirt

Answer 1

你在关于页面上停止了默认的点击事件到主页吗？也就是说，你是否在关于页面上使用了preventDefault()或stopPropagation()来阻止链接点击的默认行为？另外，你是否在hashchange事件上停止了默认行为？我们可能需要查看更多关于你历史记录实现的代码。你是否使用了任何历史记录插件？

- Zappa

---

我添加了我的其余代码。不，我没有使用 preventDefault() 或插件。您可以在此页面中查看：http://teneo.telegraphbranding.com/ - reknirt

你可能想要看一下Ben Alman的JQuery BBQ插件（http://benalman.com/projects/jquery-bbq-plugin/）。它非常易于使用，并且可以跨浏览器使用（包括您当前代码不支持的旧版浏览器）。我在我的项目中经常使用它（许多JQuery开发人员也是如此），它使生活变得更加轻松 :）。但是，我会尽快抽出时间再次查看您的更新代码。 - Zappa

我该如何在我的网站上实现BBQ插件？文档有点让我困惑。再次感谢您的帮助！ - reknirt

最开始需要一些摸索才能理解如何操作 :）。如果您不需要 BBQ 提供的所有额外功能，Ben 还有一个更简单的插件（http://benalman.com/projects/jquery-hashchange-plugin/）。否则，请查看此线程：http://stackoverflow.com/questions/116446/what-is-the-best-back-button-jquery-plugin，因为其中提到了许多历史记录插件。也许您可以在那里找到一个更容易理解且更适合您所需情况的插件。 - Zappa