在模态上使用历史记录和 pushState/currentState 时前进按钮不起作用

Question

我正在使用历史记录和 pushState/currentState 来：

更改 URL 模式触发时的设置。
如果按下后退按钮或模态关闭按钮，关闭模态并回到上一个 URL.
如果模式被触发、关闭并按下前进按钮，则重新打开模态并转到模态 URL.

除 3 外一切正常。我有这个 JS，但它似乎不起作用：

window.addEventListener('popstate', function (e) {
        var state = history.state;
        // back button pressed. close popup
        if (!state) {
            $(".modal").css({ "display": "none" });
            $('body').css('position', 'relative');
        }
        else {
            dataModal = $(this).attr("data-modal");
            $("#" + dataModal).css({ "display": "flex" });
            $('body').css('position', 'fixed');
        }
    });

And here is a Fiddle.

如有任何帮助，我们将不胜感激。非常感谢。

Answer 1

您的代码中有 2 个明显的问题：

dataModal = $(this).attr("data-modal");。 this 在此上下文中指的是 window 对象，因为 popstate 事件已在 window 上注册。 window 没有 data-modal 属性，所以 dataModal === undefined
当您在模态触发事件中 pushState 时，您并没有在任何地方保存模态 ID。

可能的解决方案

尝试在模态触发事件中做类似history.pushState({dataModal: dataModal}, title, url);的事情。然后在 popstate 事件中，您可以执行 var dataModal = e.state.dataModal 来获取模态 ID。

在模态上使用历史记录和 pushState/currentState 时前进按钮不起作用

Forward button not working when using history and pushState/currentState on modal

javascript

jquery

browser-history

html5-history