如何检测浏览器的“后退”按钮事件 - 跨浏览器

Question

如何检测浏览器的“后退”按钮事件 - 跨浏览器

javascriptcross-browsersingle-page-applicationprogressive-web-appsback

367

如何确定用户是否在浏览器中按下了返回按钮?

如何使用#URL系统在单页面Web应用程序中强制使用内部返回按钮?

为什么浏览器的后退按钮不会触发它们自己的事件！？

- Xarus

4

希望能够添加导航事件（后退/前进）。到目前为止，这是一个正在进行中的工作。https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming - Howdy

请支持对于 ongoback 事件的提案：https://discourse.wicg.io/t/set-back-button-url-in-pwas/4112 - collimarco

3

这些按钮是否不允许拦截，因为这样会使应用程序在页面上“锁定”浏览器，这种情况是否可能发生？ - William T. Mallard

1

已经有300个赞，但还没有一个有效的答案。 - greendino

@greendino - 这个问题与API本身有关（没有解释为什么popstate不存储方向-后退与前进）。简直糟糕透顶。这里的所有答案都检测到“两个”事件（后退和前进）。还没有答案（九年后的hh）。 - undefined

22个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ezra Siton · Answer 1

这里没有一个答案真正百分之百回答了具体的问题。

popstate事件“问题”（在后退/前进时都触发）

当用户在会话历史中导航时，Window接口的popstate事件会在活动的历史记录条目发生变化时触发。

历史记录条目的变化既包括“后退”按钮事件，也包括“前进”按钮事件（因此以上答案都没有真正只检测“后退”按钮）。

window.addEventListener('popstate', () => {
  console.log('User clicked back button -or- forward button
 -or- history entry changes by any other trigger');
});

解决方案是什么？根据10月23日的API，缺少这个想法。真是糟糕透顶（没有“简单的解决方案”）。

相关问题（同样没有真正/清晰的解决方案）：如何在HTML5 pushstate中判断popstate事件是来自后退还是前进操作？

- Sures Ramar · Answer 2

我尝试了上述选项，但它们都不能为我工作。这是解决方案

if(window.event)
   {
        if(window.event.clientX < 40 && window.event.clientY < 0)
        {
            alert("Browser back button is clicked...");
        }
        else
        {
            alert("Browser refresh button is clicked...");
        }
    }

请参考此链接http://www.codeproject.com/Articles/696526/Solution-to-Browser-Back-Button-Click-Event-Handli以获取更多详细信息