javascript - 如何防止默认并覆盖浏览器的后退按钮行为？

Question

抱歉，如果重复，但我不明白如何在我的案例中使用基本方法。当用户在浏览器中按下后退按钮时，我需要隐藏一些 div。这就是我所需要的。不得重新加载页面。我试过这种方式:

window.onpopstate = function (event) {
    event.preventDefault();
    alert("Back button pressed");
    myDiv.style.display = 'none';
}

但这根本行不通。即使警报也不会触发。浏览器一如既往地返回。

如何让它发挥作用？首先，这必须适用于移动浏览器。使用window.location.hash会不会触发页面重载？

Answer 1

简短回答:您无法更改它。

长答案:

你应该先设置一个State然后通过事件处理程序获取它。

因此，很简单，当用户单击文档的特定部分时，例如 <a> ，你设置了一个State然后，当他点击(浏览器的)后退按钮时，您就会触发一个事件。

someElement.addEventListener( 'click', function( e ) {

    history.pushState({ state: 'someElement was clicked' }, 'title', 'some-element.html' );

})

现在，当按下后退按钮时，您会收到一个警报(如您的问题中所示)。

更多信息请点击这里:Manipulating the browser history( mdn )