This website具有奇特效果：点击导航链接时，内容淡出，当新页面（在不同的URL上）加载时，其内容会消失in。当使用Firefox的“后退”按钮时，启动JavaScript代码不会执行
有趣的是，用户点击浏览器的“返回”按钮后，他们会回到前一页并且内容仍然在中褪色。换句话说，前一页不会停留在最后看到的淡出状态。根据this comment，页面应该停留在最后一次看到的状态。
我尝试了很多方法来重现这种效果，但在我的测试中，点击“返回”按钮后，上一页仍然不显示任何内容（内容保持淡出状态）。有时它适用于某些浏览器，但不适用于其他浏览器。有时候它可以工作，但是在重新打开浏览器之后就没有了。
网站如何实现这种效果，甚至可以在用户使用“返回”按钮转到上一页后生效？
=== EDIT 1 ===
=== EDIT 2 ===
以上测试页面已经与Firefox在三个不同的电脑进行测试，而Firefox 4版一路20版通过在线跨浏览器测试服务。结果是一样的：不起作用。
你需要一个非常简单的解决方法：勾成window.unload事件和特定条件重新加载内部window.onpageshow页面！
的jQuery：
$(window).unload(function() { $(window).unbind('unload'); });
的JavaScript：
function UnloadHandler() { window.removeEventListener('unload', UnloadHandler, false); }
window.addEventListener('unload', UnloadHandler, false);
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说：
使用在你的页面此事件处理程序阻止火狐1.5在内存中缓存bfcache页面。详细信息请参见Using Firefox 1.5 caching。
有些用户可能不要禁用Firefox的bfcache [见Page caching despite unload and beforeunload handlers），这也是为什么Firefox的修复上面是解除绑定onunload事件内onunload事件的。
为什么Safari需要window.onpageshow？显然有没有办法禁用Safari的“bfcache”，我们必须刷新页面时，它显示。
PS。 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代码，淡入就绪事件之后的内容：
$('#content').fadeIn(800);
是的，它使用该方法淡入内容。但是，这怎么能够影响上一页？点击“返回”按钮不会使上一页执行任何JavaScript代码。 –
单击后退时，将再次执行上一页的代码。 “后退按钮”只能从服务器重新加载html，但它会再次执行JavaScript代码。 所以： - >点击后退 - >从缓存中重新加载html：它开始“隐藏” - > exec fadeIn（） – Draykos
我已经设置了测试页面。你能检查他们吗？ –
不确定你的问题，但你可以使用js cookie来跟踪“状态”。 – mpm
@mpm，你能简单说明一下这是怎么完成的吗？ –