[英]Startup JavaScript code is not executed when using the Firefox “Back” button
这个网站有一个奇特的效果：当点击导航链接时，内容会淡出，当新页面（在不同的URL上）加载时，其内容会淡入。
有趣的是，在用户点击浏览器的“后退”按钮后，他们会返回上一页， 内容仍会淡入 。 换句话说，上一页不会停留在淡出状态，这是最后一次看到的。 根据这个评论 ，页面应该保持在其最后看到的状态。
我尝试了很多方法来重现这种效果，但在我的测试中，点击“返回”按钮后，上一页仍然没有显示任何内容（内容保持在淡出状态）。 有时它适用于某些浏览器但不适用于其他浏览器。 有时候它可以工作，但是在重新打开浏览器之后就没有了。
网站如何实现这种效果，即使在用户使用“后退”按钮转到上一页后也能正常工作？
===编辑1 ===
这是我的测试页面 。
===编辑2 ===
上述测试页面已经在三台不同的PC上使用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);
由于我无权更新您的网页，因此我在此处上传了一个 。
为什么Firefox需要window.onunload ？ MDN window.unload说：
在页面中使用此事件处理程序可防止Firefox 1.5在内存中的bfcache中缓存页面。 有关详细信息，请参阅使用Firefox 1.5缓存 。
有些用户可能不希望禁用Firefox的bfcache [见尽管卸载和beforeunload处理页面缓存 ），这也是为什么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>
对于任何遇到Rails问题的人而言 - 你的问题不是bfcache - 它是turbolinks宝石。 以下是如何删除它。
也许这并不是你所要求的，但他们以这种方式实现了效果：页面内容开始隐藏。 即使您单击后退按钮，也总是如此，因为隐藏的内容是在标记中的样式或类中声明的。 然后是在准备好的事件之后淡出内容的javascript代码：
$('#content').fadeIn(800);
当用户尝试按“后退”按钮或使用Firefox时，如何添加警报？ （JavaScript）
[英]How do I add an alert when the user tries to press the back button or is using firefox? (Javascript)
执行 C# 代码并注册 JavaScript 启动脚本时，如何停止页面刷新？
[英]How do I stop a page refresh when C# code behind is executed and a JavaScript startup script is registered?
当使用后退按钮时，Rails 3.1返回原始Javascript代码
[英]Rails 3.1 is returning raw Javascript code when back button is used
单击取消按钮时返回到同一页面的Javascript代码
[英]Javascript code to get back to the same page when click the cancel button
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.