JavaScript-使用后退按钮关闭弹出窗口

Question

我有一个自定义弹出功能。我想要的是浏览器后退按钮以关闭此弹出窗口。

我理想的情况是不要在网址栏中显示主题标签。

我试图把window.history.pushState('forward', null, '');我的showPopup()功能，然后执行以下操作：

$(window).on('popstate', function () {
    closePopup();
});

确实可以，但是问题是当我手动关闭弹出窗口时，必须按两次后退按钮才能导航回到上一页（显然是因为打开弹出窗口时添加了浏览器历史记录条目）。

最好的方法是什么？是否可以在不添加浏览器历史记录条目的情况下完成？本质上，我想做的是复制移动应用程序的行为。在移动应用中按返回按钮通常会关闭所有打开的模式或上下文菜单。

$(window).on('popstate', function () {
    closePopup();
});

$('.popup-link').click(function() {
    showPopup();
});

$('.popup-close').click(function() {
    hidePopup();
});

function showPopup() {
    $('.popup').addClass('active');
}

function hidePopup() {
    $('.popup').removeClass('active');
}

.popup {
  background-color: #ccc;
  width: 300px;
  height: 300px;
  display: none;
}

.popup.active {
    display: block;
}

Answer 1

如果不添加浏览器历史记录条目，则无法执行此操作，因为您无法覆盖后退按钮的行为，请参阅在AJAX应用程序中拦截对后退按钮的调用：我不希望它做任何事情

Sujumayas答案是一个不错的选择，尽管应避免打开多个弹出窗口时历史记录出现问题（例如，多次单击按钮时），但您应该引入一些其他变量

这是一些可能的示例代码：

let popupOpen = false;

$(".popup-link").click(function() {
    showPopup();
});

$(".popup-close").click(function() {
    window.history.back();
});

function showPopup() {
    if (popupOpen) {
        window.history.back();
    }
    popupOpen = true;
    window.history.pushState("forward", null, "");
    $(".popup").addClass("active");
}

function hidePopup() {
    popupOpen = false;
    $(".popup").removeClass("active");
}

$(window).on("popstate", function() {
    hidePopup();
});

另外请注意，您可能会遇到Opera Mini的问题：https : //caniuse.com/#search=history

Answer 2

虽然我不建议覆盖常规浏览器历史记录管理（后退按钮）来随意使用它......

我认为您在示例中错过的唯一一件事是关闭按钮不应自​​行关闭模式，而应仅执行后退按钮事件（最终将关闭模式）。

这个简单的修复，它就会按照你想要的方式工作。