gpt4 book ai didi

javascript - 更改 window.location.hash 在历史记录中创建条目但不影响 chrome 后退按钮

转载 作者:行者123 更新时间:2023-11-29 16:30:50 26 4
gpt4 key购买 nike

更新:- 正如 Akansh Gulati 在他的回答中指出的那样,如果用户在单击后退按钮之前与页面有任何交互,这将按预期工作,如果用户不这样做与页面进行任何交互并按下后退按钮,然后历史记录中的任何条目(通过哈希更改或通过 history.push/replace )将被忽略,这是 Google Chrome update will stop websites hijacking your browser back button 的一部分

这是有效且合乎逻辑的答案,所以我接受他的答案


我试图在页面加载后显示一个成功的弹出窗口,如果用户按下 android 后退按钮(在这种情况下相当于浏览器后退按钮)我只想关闭弹出窗口(不想重定向回付款页)

当弹出窗口打开时,我在 url 中添加哈希,但是当用户按下后退按钮时,chrome 忽略哈希并重定向回上一页,而不是仅仅删除哈希(在 Firefox 中工作正常)

我有一个工作示例 here 使用以下 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) 等到 hash 变成 '#c'

c) 然后按浏览器后退按钮

预期的行为是它应该将散列更改回“#b”,然后再更改回“#a”但它忽略所有哈希更改并重定向回新标签页

这是 code

      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 图片

actual behavior GIF image

最佳答案

在此浏览器中,您需要通过 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);

关于javascript - 更改 window.location.hash 在历史记录中创建条目但不影响 chrome 后退按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58128939/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com