javascript - 我可以使用 onpopstate 事件的 target.location.href 来更改页面内容吗？

Question

我正在尝试更新网址而不刷新页面，同时保留使用后退和前进浏览器按钮的可能性。我正在使用这个逻辑https://stackoverflow.com/a/3354511/6783371但我有一些问题。

当我加载页面时，我立即执行以下代码:

window.onpopstate = function (e) {
    if (e.state) {
        changeStep(e.state.step);
    }
};

changeStep 只是一个根据 url 显示正确内容的函数。

每当我更改页面时，我都会调用此函数:

function updateUrl(step, url){
    window.history.pushState({"step": step}, "", url);
}

现在的问题是，当我按后退按钮时，无法到达第一页。网址会更新，但页面内容不会更新。这就是为什么当处理 onpopstate 事件时，e 事件没有 state 属性。这是因为页面第一次加载时不会推送状态。但是如果我这样做，那么如果我在页面加载时调用 updateUrl ，我就会遇到另一个问题，当我开始向后(通过浏览器后退按钮)测试正确的行为时，第一个页面会加载两次，第一个页面事件内有属性状态的时间，以及第二次也是最后一次没有该属性状态的时间。换句话说，我仍然遇到同样的问题。

但我还注意到另一件事，onpopstate 事件还具有属性 target，该属性又包含 location.href (即 url)目标页面的。根据该网址，我可以了解必须在该确切页面中显示哪些内容。

所以我的问题是，因为我不需要存储在 state 属性内的任何特定数据，但为了更新页面内容，我唯一需要的是目标网址，我可以忽略 onpopstate 事件的属性 state 并直接使用 target.location.href 吗？它有什么复古之处吗？也许在特殊情况下这不起作用？

代码如下所示

window.onpopstate = function (e) {
    if (e.target && e.target.location && e.target.location.href) {
        changeStep(e.target.location.href);
    }
};

我什至不需要在页面第一次加载时设置状态。

Answer 1

您可以使用 history.replaceState() 更新第一个状态当页面加载时。这将使 URL 保持不变，但会向初始页面添加状态。

现在您不会再遇到返回两次的问题，一次带有 state 对象，另一次没有。

window.addEventListener('load', function(event) {
  let step = 0;
  history.replaceState({ step }, '');
});