当我使用 window.history.pushState
更改 url 时,返回浏览器历史记录时页面不会自动重新加载,例如通过点击“历史后退按钮”。为什么页面没有自动重新加载?我可以改变这种行为吗?
这里有一小段代码来举例说明这个“问题”:
<html>
<head>
<title>Location test</title>
<script>
function load() {
var value = window.location.search.substr(1);
document.getElementById('myInput').value = value;
document.title = 'Location test - ' + value;
}
function set(el) {
window.history.pushState('', '', window.location.pathname + '?' + el.value);
document.title = 'Location test - ' + el.value;
}
</script>
</head>
<body onload="load();">
<input id="myInput" type="text" onkeyup="set(this);">
</body>
</html>
只需在文本字段中写入内容,浏览器历史记录就会相应更新。点击浏览器的历史后退按钮不刷新页面。您必须手动刷新它。
我通过在运行 window.history.back(); 的网站上插入我自己的“后退按钮”来解决这个问题; location.reload();
。但如果普通浏览器的“历史后退按钮”也能解决问题,我会很高兴。
最佳答案
我认为这可能比我更好地解释了这个主题。 http://rosspenman.com/pushstate-jquery
popstate 是关键
我正在处理一个非常相似的问题。不要认为它很漂亮,但以下片段或其变体可能会有所帮助
$(window).on("popstate", function(e) {
if (e.originalEvent.state !== null) {
location.reload()
}
});
关于javascript - 结合 window.history.pushState 返回历史记录时,页面不会重新加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23429794/