如何在按下窗口的后退按钮时触发功能？

Question

尝试通过按下后退按钮（每次）来触发功能（比如说警报）。

代码如下：

$(function() {
  if (window.history && window.history.pushState) {
    window.history.pushState('', null, './');
    $(window).on('popstate', function() {
      alert('Back button was pressed.');
    });
  }
});

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

然而，上面的代码在页面加载时只能工作一次，为了让它再次工作，我必须再次重新加载页面，因此函数再次运行，以便检测到“后按”。

为了克服这个问题，我尝试在同一个函数中调用该函数。

function call() {
  if (window.history && window.history.pushState) {
    window.history.pushState('', null, './');
    $(window).on('popstate', function() {
      alert('Back button was pressed.');
      call();
    });
  }
}

$(document).ready(function() {
  call();
});

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

这一次，页面加载，call() 被调用并在后按时触发警报。但是第二次按下返回，警报被调用两次，第三次按下返回按钮，警报被触发 4 次，依此类推......

这是JSFiddle 玩。

我似乎遗漏了一些逻辑。任何帮助表示赞赏。

Answer 1

在一些 JSFiddling 之后，我有点操纵我的代码以按照我需要的方式工作。

更新无法证明上述查询的合理性，但满足了我的要求。

代码如下：

<div class="some" style="width:100px;height:50px;background:green;display:none;"></div>

<button class="some_btn">tada</button>

<script>
$(".some_btn").click(function() {
    $(".some").css("display","block");
  call();
});

function call() {
  if (window.history && window.history.pushState) {
  if($('.some').css('display') == 'block') {
    window.history.pushState('', null, './');
    $(window).on('popstate', function() {
      $(".some").css("display","none");
    });
  } else { 
  
  }
    
  }
}
</script>

所以在上面的代码中，call() 会在每次显示特定块时触发，并使“后退按钮”为空，并在隐藏块时启用后退按钮。

希望这对有需要的人有所帮助。