如何将 url 添加到上一个浏览器条目以触发 popstate-解网

问：

假设我有两个页面，current.html 和 previous.html，我从以前的 .html 导航到 current.html。

所以我的浏览器目前显示 current.html 作为 url，如果我查看选项卡历史记录，previous.html 将显示为上一个条目。

当用户在浏览器中单击当前 .html 的后退（或前进，但我什至无法弄清楚后退哈哈）按钮时，我想在上一个 .html 上播放 CSS 动画。

我不知道该怎么做。我最初的想法是使用 popstate 事件。但是，这需要我再次手动将以前的 url 推送到浏览器历史记录中，因为 popstate 仅在您手动添加/替换带有 push 和 replacestate 的历史记录条目时才会触发（我认为？

我现在能想到的最好的方法是做一个pushstate，将url设置为previous.html，然后做history.back，但这里的顺序与我想要的相反。

有什么办法可以做到这一点吗？

谢谢！

javascript html 浏览器历史

评论

0赞 Kaddath 7/4/2023

我认为你把它弄倒了，见文档：恰恰相反，当您手动添加/删除状态时，事件不会触发，只有当用户在浏览器中单击后退或前进时才会触发。如有疑问，请务必查看文档或尝试使用简单的代码popstate

0赞 Max0815 7/4/2023

@Kaddath 我试过在不手动添加/删除状态的情况下测试它，以及只是正常导航，而且似乎只有在您手动执行此操作时才会发生 popstate

0赞 Kaddath 7/4/2023

这个 JSFIDDLE 向您展示了基本行为：从浏览器/链接导航并调用 / 触发事件，手动推送/删除状态不会。希望这能澄清，也许我们彼此不了解。因此，您不需要操纵历史状态来触发事件back()forward()

答：

0赞 Ifeoluwa Adaralegbe 7/4/2023 #1

在页面中，添加一个 JavaScript 代码块来侦听事件：previous.htmlpageshow

window.addEventListener('pageshow', function(event) {
  if (event.persisted || (window.performance && window.performance.navigation.type === 2)) {
    // Play your CSS animation here
    console.log('Animation played on previous.html');
  }
});

在页面中，当用户单击后退按钮时，可以使用该方法更新页面的状态并触发事件：current.htmlhistory.replaceState()previous.htmlpageshow

window.addEventListener('popstate', function(event) {
  history.replaceState({}, document.title, window.location.href);
});

注意：如果需要，您可能需要添加其他逻辑来区分初始加载和后退导航，因为该事件也会在页面初始加载时触发。pageshowprevious.html

评论

0赞 Max0815 7/4/2023

谢谢，我会在 tmrw 早上测试一下

0赞 Max0815 7/5/2023

使用 window.performance 有点工作，但是在前进和后退键在动画结束时加载页面之前，动画只播放了几次，我对这个项目太累了，无法打扰任何未来的调试，所以我会这样做

0赞 Ifeoluwa Adaralegbe 7/5/2023

你现在能更明确地说明这个问题吗，我似乎不明白你的意思

0赞 Max0815 7/6/2023

我的问题基本上说明了我的问题，您的修复程序部分解决了它。我不想继续尝试调试它，因为懒惰，所以它会做

上一个：Vaadin 历史奇怪的行为

下一个：防止使用canDeactivate和中间页面离开应用程序