javascript - 当用户单击浏览器的后退按钮时隐藏 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，因为它们在历史堆栈中，浏览器会自动更新它们。