如何准确检测浏览器中的后退按钮点击？

以更高的准确性检测浏览器中的后退按钮点击

简介：

识别后退按钮点击对于实现浏览器至关重要导航历史记录跟踪。虽然存在多种方法，但区分真正的后退按钮点击和触发类似事件的其他浏览器操作至关重要。

背景：

一种常见的方法涉及使用窗口.onbeforeunload 事件侦听器，当用户尝试关闭或导航离开页面时触发。但是，此事件也会在按 F5 或重新加载页面等操作时触发，从而导致误报。

解决方案：

要解决此问题，需要使用更复杂的方法需要解决方案。该解决方案利用了history.pushState和window.onpopstate方法，它们可以更好地控制导航历史记录。

实现：

以下代码片段演示了实现：

<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) buttons here
            // Will NOT handle refresh, use onbeforeunload for this.
        };
    } else {
        var ignoreHashChange = true;
        window.onhashchange = function () {
            if (!ignoreHashChange) {
                ignoreHashChange = true;
                window.location.hash = Math.random();
                // Detect and redirect change here
                // Works in older Firefox and Internet Explorer 9
                // * it does mess with your hash symbol (anchor?) pound sign
                // delimiter on the end of the URL
            } else {
                ignoreHashChange = false;
            }
        };
    }
}</code>

说明：

此代码使用history.pushState 更新浏览器的历史记录，而无需重新加载页面。然后它绑定到 window.onpopstate 事件，该事件在用户单击后退或前进按钮时触发。

在支持 History.pushState 的浏览器中，此方法可以精确检测后退按钮单击，不包括重新加载事件。对于较旧的浏览器，代码使用基于哈希更改的回退方法，这在处理井号分隔符方面引入了轻微的限制。

结论：

这种增强的方法确保准确检测浏览器中的后退按钮点击，消除单独使用 window.onbeforeunload 的限制。它为开发者提供了跟踪导航历史记录和增强用户体验的可靠解决方案。

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