我有以下代码:
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/