javascript - 如何确定是否触发了历史后退/前进

Question

我正在使用 ajax 来模拟​​菜单。一切正常，但后退 和前进 按钮无法正常工作。

所以代码是:

$('#sdt_menu a').on('click', function (e) {
    href = $(this).attr("href");
    e.preventDefault();
    window.onpopstate = function (event) {
        document.url = event.state.url;
        loadSpecificPage(window.location.pathname);
    };
    pushingState(href);
})

window.onpopstate 查找历史记录中的更改。pushingState 只是将新页面推送到历史。

有了这个菜单项被正确加载到浏览器历史记录中。但是，例如，当我点击后退按钮时，window.onpopstate 以及我的 pushingState 函数都会被触发。假设我在第 1 页，现在加载第 2 页。当我现在在浏览器中点击后退按钮时，我正确地返回到第 1 页，但我重新加载第 1 页并转到它。所以最后我没有正确返回。所以应该不会触发pushingState函数，那么它应该可以正常工作。我至少只是用当前方式将当前页面替换为最后一页。

总结:window.onpopstate 工作正常。但 pushingState 函数不应在点击浏览器后退/前进按钮时触发。

所以我的想法是创建一个 if 语句来检查是否单击了其中一个按钮。但是我没有找到类似的东西。这里有一些对我不起作用的链接:detect back button click in browser和 JavaScript or jQuery browser back button click detector

也许我在这个方向上考虑的太多了，不知何故更容易？

添加了 pushState 函数

function pushingState(href){
    if (href == "/about" || href == "/about/") {
        history.pushState('About', 'about', href);
    }
    if (href == "/creator" || href == "/creator/") {
        history.pushState('Creator', 'creator', href);
    }
}

Answer 1

我现在正在使用这段代码。它与最初的想法有点不同，仍然不是完美的解决方案，但至少更好，后退和前进按钮可以正常工作:

$('#sdt_menu a').on('click', function (e) {
    var href = $(this).attr("href");
    history.pushState(href, '', href);
    e.preventDefault();
    window.onpopstate = function (event) {
        if (event.state != null){
            document.url = event.state.url;
            pushingState(event.state);
        }
    };
});