如何在不使用 pushstate 的情况下捕获浏览器的后退按钮？

Question

我曾尝试使用 pushstate 和 popstate 捕获浏览器上的后退按钮操作，但问题是 pushstate 会更改历史记录，从而影响后退按钮的正常功能。

Answer 1

创建一个数组，用于收集用户对 window.location.lasthash 所做的每次更改时的 window.location.hash。

const updateHistory = (curr) => {
    window.location.lasthash.push(window.location.hash);
    window.location.hash = curr;
}

很遗憾，单击浏览器的后退按钮不会触发本机事件。但是，有一个很好的方法可以使用其他本地事件侦听器的组合来伪造它。

首先，通过侦听onmouseover 事件，设置一个在每次呈现文档时切换的布尔值。

const onDocRenderHandler = (bool) => {
    window.innerDocClick = bool;
}

document.onmouseover = onDocRenderHandler(true)

用户点击后退按钮后，文档再次呈现，因此设置布尔标志再次切换；只有这一次监听onmouseleave 事件触发。

document.onmouseleave = onDocRenderHandler(false)

最后，监听onhashchange 事件在文档渲染之间触发。这模拟了一个伪后退按钮事件，供我们监听和操作。

const onHashChangeHandler = () => {
    if(!window.innerDocClick) {
        history.pushState("", document.title, window.location.pathname);
        location.reload();
    }
}
window.onhashchange = onHashChangeHandler()

Answer 2

大多数人推荐使用：

window.onhashchange = function() {
    if (window.innerDocClick) {
        window.innerDocClick = false;
    } else {
        if (window.location.hash != '#undefined') {
            goBack();
        } else {
            history.pushState("", document.title, window.location.pathname);
            location.reload();
        }
    }
}
function goBack() {
    window.location.hash = window.location.lasthash[window.location.lasthash.length-1];
    //blah blah blah
    window.location.lasthash.pop();
}