我有一个奇怪的问题，只出现在某些浏览器中，我无法在任何地方找到解决方案。
目标是：
制作一个带有超链接的简单页面。 单击超链接时，立即出现一个框，告诉用户等待从网络获取下一页。 如果访问者没有 JavaScript，则不会出现该框，并且将尝试加载下一页。非 javascript 版本没问题，但 javascript 版本会出现问题。
在 Firefox 版本 123.0 和适用于 Windows 10 的 Chrome 122 中，我遇到的问题是，如果用户尝试加载下一页然后单击浏览器上的后退按钮，该框会自动出现（这不应该发生）。
在 Seamonkey 2.53.18.2 中一切正常。
这是我使用的可以重现该问题的 PHP 代码。哎呀，不使用 PHP 部分也可以重现该问题。
<?php
//this code fragment simulates when the resource was last updated
//so then I load the resource once and generate status 304 when user clicks the back button
date_default_timezone_set('America/Toronto');
$uset=strtotime("2024-04-13 6:20PM");
$lmod=gmdate("D, d M Y H:i:s T",$uset);
$ifms=$_SERVER["HTTP_IF_MODIFIED_SINCE"];
header('Last-Modified: '.$lmod,true);
if (isset($ifms{1}) && $ifms===$lmod){
header('HTTP/1.1 304 NM',true);exit();
}
?>
<!DOCTYPE HTML>
<html>
<head>
<style>
#wbox{
display:none;
border-radius:1em;
border:1px solid black;
background:#FFFFAA;
color:#000000
}
</style>
</head>
<body>
<h1>Content loader</h1>
<a ID="clickee" href="something.htm">Click here</a>
<div ID="wbox">
<h2>Loading contents...</h2>
</div>
<script>
function showbox(){
document.getElementById('wbox').style.display="block";
}
document.getElementById('clickee').addEventListener("click",showbox);
</script>
</body>
</html>
是否是新的浏览器遇到了错误，或者我可以对我的代码做些什么来防止当用户通过单击“后退”按钮返回页面时自动出现“正在加载内容”框。
哦，如果用户在单击后退按钮后单击刷新/重新加载按钮，问题就会消失，但是当只应单击 1 个按钮时，单击 2 个按钮会很不方便。
如上所述，我在多个浏览器中测试了我的代码。 “正在加载内容”框仅应在离开页面时出现，而不是在使用浏览器的“后退”按钮重新进入页面时出现。
点击后退按钮时页面似乎没有触发加载。
这是实现您所需的最简单的技巧。 将正文内容替换为：
<h1>Content loader</h1>
<a onclick="showbox(true)" href="something.htm">Click here</a>
<div ID="wbox">
<h2>Loading contents...</h2>
</div>
<script>
function showbox(show){
document.getElementById('wbox').style.display = show ? "block" : "none";
}
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
showbox(false);
}
});
</script>请注意，我修改了您的代码以直接从 a 标记调用 showbox()，并且我还添加了 true 或 false 参数（显示或隐藏它）。
我添加了用于可见性更改的事件侦听器，因此当您已经离开页面（这意味着该页面不再可见）时，wbox 将隐藏。