This website有一个奇特的效果:当点击导航链接时，内容淡出，当新页面(在不同的 URL 上)加载时，其内容淡入。
有趣的是，用户点击浏览器的“后退”按钮后，返回到上一页，内容仍然淡入。换句话说，上一页不会停留在淡出状态，也就是最后看到的状态。根据this comment , 页面应该保持其最后一次看到的状态。
我尝试了很多方法来重现这种效果，但在我的测试中，在点击“后退”按钮后，上一页仍然没有任何显示(内容保持在淡出状态)。有时它适用于某些浏览器，但不适用于其他浏览器。有时可以，但重新打开浏览器后就不行了。
网站如何实现这种效果，甚至在用户使用“后退”按钮转到上一页后仍然有效？
=== 编辑 1 ===
=== 编辑 2 ===
以上测试页面已经在三台不同的 PC 上使用 Firefox 进行了测试，Firefox 从版本 4 一直到版本 20 通过在线跨浏览器测试服务。结果是一样的:不起作用。
最佳答案
您需要一个非常简单的解决方法:挂接到 window.unload 事件，以及在 window.onpageshow 中重新加载页面的特定条件!
Firefox 修复
jQuery:
$(window).unload(function () { $(window).unbind('unload'); });
JavaScript:
function UnloadHandler() { window.removeEventListener('unload', UnloadHandler, false); }
window.addEventListener('unload', UnloadHandler, false);
iOS Safari 修复
jQuery:
$(window).bind('pageshow', function(event) {
if (event.originalEvent.persisted) {
window.location.reload()
}
});
JavaScript:
window.addEventListener('pageshow', function (event) {
if (event.persisted) {
window.location.reload()
}
}, false);
工作样本
由于我无权更新您的页面，我已经 uploaded one here .
为什么 Firefox 需要 window.onunload？ MDN window.unload说:
Using this event handler in your page prevents Firefox 1.5 from caching the page in the in-memory bfcache. See Using Firefox 1.5 caching for details.
有些用户可能不想禁用 Firefox 的 bfcache [请参阅 Page caching despite unload and beforeunload handlers 部分)，这就是为什么上面的 Firefox 修复是取消绑定(bind) onunload 事件 inside 的 onunload 事件.
为什么 Safari 需要 window.onpageshow？显然没有办法禁用 Safari 的“bfcache”，我们必须 strong> 显示时刷新页面。
附言。 bfcache 表示后退/前进缓存。
完整的 HTML/JavaScript 供引用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div>
<a href="fadingpage.html?p=1">Page 1</a>
<a href="fadingpage.html?p=2">Page 2</a>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas laoreet imperdiet diam, in sodales velit porta eget. Ut tellus urna, vestibulum vel facilisis eu, blandit sed est. Sed tortor justo, interdum vel iaculis eu, semper ut libero. Morbi porttitor sem eget dolor eleifend fermentum. Mauris lacinia dictum lacus ut pharetra. Proin lacus felis, vestibulum sit amet malesuada id, pretium at lorem. Duis elementum sapien vitae nibh consequat tincidunt. Proin gravida rhoncus metus sed feugiat. Sed ultricies tellus et augue adipiscing dictum. In vitae tellus eget sapien fringilla tincidunt. Vestibulum gravida, velit quis mattis elementum, lacus felis vestibulum neque, et commodo quam orci quis odio. Nunc varius viverra metus, eu dictum massa venenatis vel. Cras suscipit, orci a gravida pretium, erat massa facilisis turpis, quis sodales sem metus vitae ligula. Nunc interdum augue vel arcu vulputate quis aliquet nulla vehicula. Suspendisse eros odio, ultrices hendrerit euismod nec, condimentum sed metus.</p>
<p>Donec at dolor et arcu aliquam tincidunt. Nulla eu elit sit amet leo facilisis posuere. Etiam non elit ac elit ornare elementum a vitae felis. Aenean semper nunc urna. Ut et interdum mi. Duis mollis est eu leo gravida vitae adipiscing leo commodo. Ut scelerisque cursus nulla, nec bibendum elit molestie sed. Nulla facilisi. Proin neque arcu, aliquam sed sagittis non, ultrices in enim. Fusce vitae nunc neque, ut sodales magna. Proin aliquam lobortis augue sed aliquet. Maecenas sit amet pellentesque mauris. Donec luctus purus hendrerit nisl pharetra eleifend. Mauris a lectus mi. In elit dui, porta a venenatis vel, consectetur id magna. Quisque vehicula leo vel nulla convallis quis sollicitudin sem fringilla.</p>
<p>Morbi nec mi odio, eget porttitor nisi. Duis luctus blandit lacus. Donec quis sagittis mi. Maecenas id nisl enim. Aliquam erat volutpat. Nulla facilisi. Donec ac velit diam, interdum rutrum mauris. Nullam at odio eget felis tempus elementum. Nam a augue nibh, sed bibendum massa. Vivamus eget sollicitudin mauris. Pellentesque dapibus quam nec ligula blandit scelerisque. In vulputate mauris vel dolor interdum vitae aliquet nisl convallis. In massa mi, consectetur id malesuada at, suscipit vitae libero. Sed a ligula erat.</p>
</div>
<script type="text/javascript">
$(function() {
$('body').hide().fadeIn(800);
$('a').click(function() {
var href = $(this).attr('href');
$('body').fadeOut(800, function() {
window.location = href;
});
return false;
});
});
// Firefox fix
$(window).unload(function () { $(window).unbind('unload'); });
// iOS Safari fix
$(window).bind('pageshow', function(event) {
if (event.originalEvent.persisted) {
window.location.reload()
}
});
</script>
</body>
</html>
关于javascript - 使用 Firefox "Back"按钮时不执行启动 JavaScript 代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15791148/