当用户单击浏览器的后退按钮时隐藏div

Question

当用户单击缩略图时，它会打开一个覆盖整个屏幕的div，并且文档标题和URL都会更改。

$('.view-overlay').show();
$('html,body').css("overflow","hidden");

// once AJAX is done, in success:

$('.view-overlay').append(data);
window.history.pushState('page2', title, url);
document.title = title;

当用户单击后退按钮时，我想通过执行以下JS来反转它：

$('.view-overlay').empty().append('<div class="view-close">x</div>').hide();
$('html,body').css("overflow","auto");
window.history.pushState('page1', "previous title", "previous url");
document.title = "previous title";

我尝试过onbeforeunload但不确定是否可以使用它

Answer 1

使用window.onpopstate可以检测到事件，例如按下后退按钮。

编辑 ：在您的示例中，您可以执行以下操作：

window.onpopstate = function() {
    $('.view-overlay').empty().append('<div class="view-close">x</div>').hide();
    $('html,body').css("overflow","auto");
    window.history.pushState('page1', "previous title", "previous url");
    document.title = "previous title";
}

但是，您无需手动设置标题或URL，因为它们位于历史记录堆栈中，浏览器将自动更新它们。