我有以下代码:

window.history.pushState(newUrl, "", newUrl);


我的问题是,如何确保在执行pushState时浏览器的“后退”按钮将正常运行,或者换句话说应该“后退”?

(不使用jQUery)

最佳答案

“后退”按钮的正常行为是浏览器返回上一个文档,但是当您使用pushState时,没有上一个文档。

pushState的重点是在更新URL时使浏览器保持在同一文档上。这伴随着JavaScript所应用的DOM更改。

这是转到新页面的模拟。

为了使后退按钮看起来有效,您需要编写一个匹配的模拟,以转到上一页。

您可以通过监听a popstate event来实现。

Page <span id="p">1</span>

<button>Next</button>

<script>
document.querySelector("button").addEventListener("click", function () {
  document.getElementById('p').textContent++;
  history.pushState({}, "", "/" + document.getElementById('p').textContent);
});

addEventListener("popstate", function (e) {
  document.getElementById('p').textContent--;
  e.preventDefault();
});
</script>

关于javascript - 使用pushState时如何“浏览器返回”?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44553005/

10-14 13:53