更改 window.location.hash 会在历史记录中创建条目，但不会影响 chrome 后退按钮
Tri*_*kar 5 javascript google-chrome browser-history html5-history
更新：-正如Akansh Gulati他的回答中指出的，如果用户在单击后退按钮之前与页面进行任何交互，这将按预期工作，如果用户没有与页面进行任何交互并按后退按钮，则历史记录中的任何条目（通过哈希-change 或通过history.push/replace）将被忽略，这是Google Chrome更新的一部分，将阻止网站劫持您的浏览器后退按钮
这是有效且合乎逻辑的答案，所以我接受他的答案
我试图在页面加载后显示成功的弹出窗口，如果用户按 android 后退按钮（在本例中相当于浏览器后退按钮），我只想关闭弹出窗口（不想重定向回付款页面）
当弹出窗口打开时，我在 url 中添加哈希，但当用户按下后退按钮时，chrome 会忽略哈希并重定向回上一页，而不是仅删除哈希（在 Firefox 中工作正常）
我这里有一个工作示例，使用以下 HTML 代码来重现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body onload="test()">
<button type="button" onclick="window.history.back();">Back</button>
</body>
<script type="text/javascript">
function writeLength() {
document.body.appendChild(document.createTextNode(window.history.length));
}
function test() {
window.location.hash = 'a';
setTimeout(function() {
writeLength();
window.location.hash = 'b';
setTimeout(function() {
writeLength();
window.location.hash = 'c';
setTimeout(function() {
writeLength();
}, 1500);
}, 1500);
}, 1500);
}
</script>
</html>a) 在 chrome 中打开此页面
b) 等待哈希值更改为“#c”
c) 然后按浏览器后退按钮
预期的行为是它应该将哈希更改回“#b”，然后返回“#a”，但它会忽略所有哈希更改并重定向回新选项卡页面
这是代码
window.location.hash = 'a';
setTimeout(function() {
writeLength();
window.location.hash = 'b';
setTimeout(function() {
writeLength();
window.location.hash = 'c';
setTimeout(function() {
writeLength();
}, 1500);
}, 1500);
}, 1500);
我怎样才能模拟正确的行为（如果有办法的话）？
我在 Mac 上使用 chrome 版本 77.0.3865.90（官方版本）（64 位）
这是行为的 GIF 图片
在此浏览器中，您需要通过History API在历史记录中显式设置至少一种状态（但不确定原因）。
即使在此 iframe 中，该示例也应该可以工作。
history.replaceState( {}, '' );
window.location.hash = 'a';
setTimeout(function() {
console.log( location.hash );
window.location.hash = 'b';
setTimeout(function() {
console.log( location.hash );
window.location.hash = 'c';
setTimeout(function() {
console.log( location.hash );
console.log( "You can now use your browser's back button" );
onpopstate = e => console.log( location.hash );
}, 150);
}, 150);
}, 150);我尝试使用 PushState 进行进一步的位置更改，问题似乎已解决。无需更换State。条件只是用户必须至少点击/与屏幕交互一次。
function test() {
window.location.hash = 'a';
setTimeout(function () {
writeLength();
window.history.pushState(null, null, `${window.location.pathname}#b`);
setTimeout(function () {
writeLength();
window.history.pushState(null, null, `${window.location.pathname}#c`);
setTimeout(function () {
writeLength();
}, 1500);
}, 1500);
}, 1500);
}
| 归档时间： |
|
| 查看次数： |
5433 次 |
| 最近记录： |