Question

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

Answer 1

大多数人建议使用：

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();
}

Answer 2

创建一个Array，收集用户的window.location.hash，并对window.location.lasthash进行每次更改。

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()

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

2 个答案: