如何在不干扰浏览器重新加载的情况下检测用户在浏览器中单击后退按钮？-js教程-PHP中文网

如何在不干扰浏览器重新加载的情况下检测用户在浏览器中单击后退按钮？

Patricia Arquette

发布： 2024-10-22 14:41:48

原创

305 人浏览过

How to Detect User's Back Button Click in Browsers Without Browser Reload Interference?

检测浏览器中用户的后退按钮点击

在尝试检测后退按钮点击时，开发人员通常依赖 window.onbeforeunload 事件侦听器。但是，此事件不仅会在后退按钮点击时触发，还会在浏览器重新加载时触发，这可能会产生误导。

在没有浏览器重新加载干扰的情况下检测后退按钮点击

处理单击后退按钮而没有误报，请考虑使用量身定制的方法：

历史记录修改：
- 页面加载时，检查是否History.pushState API 可用。
- 如果支持，使用history.pushState 将随机状态推送到历史记录中。
- 定义 onpopstate 事件监听器来处理后退和前进按钮转换。
基于哈希的方法：
- 如果不支持history.pushState，请使用哈希更改事件（window.onhashchange） .
- 设置初始哈希值，并在哈希更改时检查非随机哈希值。
- 使用标志来确保只有用户启动的哈希更改才会触发后退按钮逻辑，忽略浏览器重新加载。

实现

<code class="javascript">window.onload = function () {
    if (typeof history.pushState === "function") {
        history.pushState("jibberish", null, null);
        window.onpopstate = function () {
            history.pushState('newjibberish', null, null);
            // Handle back button click here
        };
    }
    else {
        var ignoreHashChange = true;
        window.onhashchange = function () {
            if (!ignoreHashChange) {
                ignoreHashChange = true;
                window.location.hash = Math.random();
                // Handle back button click here
            }
            else {
                ignoreHashChange = false;
            }
        };
    }
}</code>

登录后复制

兼容性

此方法据报道可以在 Chrome 和 Firefox 中有效运行。

以上是如何在不干扰浏览器重新加载的情况下检测用户在浏览器中单击后退按钮？的详细内容。更多信息请关注PHP中文网其他相关文章！