时间戳

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

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

问题描述

我正在尝试在不刷新页面的情况下更新 url，从而保持使用后退和前进浏览器按钮的可能性。我正在使用这个逻辑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);
}

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

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

所以我的问题是，因为我不需要任何特定的数据，存储在state属性中，但是为了更新页面的内容，我唯一需要的是目标 url，我可以忽略stateonpopstate 事件的属性和直接去target.location.href？它有任何倒退吗？也许这是一个不起作用的特殊情况？

代码看起来像这样

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

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

标签： javascriptjqueryurl-rewriting

解决方案

history.replaceState()您可以使用页面加载时更新第一个状态。这将保持 URL te 相同，但会state在初始页面中添加一个。

现在你不会有返回两次的问题，一次有一个state对象，一次没有。

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

推荐阅读