如何准确检测 Web 浏览器中的后退按钮点击，同时避免错误触发？

检测 Web 浏览器中的后退按钮点击：解决错误触发器

当尝试检测用户的后退按钮点击时，开发人员通常依赖window.onbeforeunload 事件。然而，这种方法有一个局限性：它也会在执行其他操作时触发，例如刷新页面。

更全面的解决方案是区分后退按钮单击和其他事件：

使用 History API：

此方法针对支持 History API（history.pushState 函数）的浏览器：

<code class="js">window.onload = function () {
  if (typeof history.pushState === "function") {
    history.pushState("jibberish", null, null);
    window.onpopstate = function () {
      history.pushState('newjibberish', null, null);
      // Handle back or forward button clicks here (excluding refresh)
    };
  } else {
    ... // Handle non-History API browsers
  }
}</code>

使用哈希更改：

对于不支持 History API 的浏览器，可以使用哈希更改来实现后备解决方案：

<code class="js">window.onload = function () {
  ... // Similar to History API code
} else {
  var ignoreHashChange = true;
  window.onhashchange = function () {
    if (!ignoreHashChange) {
      ignoreHashChange = true;
      window.location.hash = Math.random();
      // Detect back button click here
      // Note: Messes with hash symbol at the end of URL
    } else {
      ignoreHashChange = false;
    }
  };
}</code>

处理刷新问题：

虽然上述解决方案解决了后退按钮检测问题，它们不处理刷新页面。为此，仍然可以使用 window.onbeforeunload：

<code class="js">window.onbeforeunload = function (e) {
  if (e.preventDefault) {
    e.preventDefault();
    e.returnValue = '';
  }
}</code>

以上是如何准确检测 Web 浏览器中的后退按钮点击，同时避免错误触发？的详细内容。更多信息请关注PHP中文网其他相关文章！