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";
}

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

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

1 个答案: