使用Firefox "返回"时不会执行启动JavaScript代码.按钮
Startup JavaScript code is not executed when using the Firefox "Back" button
这个网站有一个奇特的效果:当点击导航链接时,内容淡出,当新页面(在不同的URL上)加载时,其内容淡出。
有趣的是,当用户点击浏览器的"返回"按钮后,他们返回到上一页,内容仍然淡出。换句话说,前一个页面不会停留在最后一次看到的淡出状态。根据这个评论,一个页面应该保持在它最后一次看到的状态。
我尝试了很多方法来重现这种效果,但在我的测试中,点击"后退"按钮后,上一页仍然没有显示任何内容(内容保持在淡出状态)。有时它在某些浏览器上工作,但在其他浏览器上不起作用。有时它可以工作,但重新打开浏览器后就不工作了。
网站是如何实现这种效果的,甚至在用户使用"返回"按钮转到上一页后仍然有效?
===编辑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 fix
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窗口。卸载说:
在页面中使用这个事件处理程序可以防止Firefox 1.5将页面缓存到内存中的bfcache中。详情请参见使用Firefox 1.5缓存。
一些用户可能不想禁用Firefox的bfcache[参见页面缓存尽管卸载和beforeunload处理程序),这就是为什么Firefox修复上面是解除绑定onunload
事件在onunload
事件的。
为什么Safari需要window.onpageshow
?显然没有办法禁用Safari的"bfcache",我们必须在显示时刷新页面。
p。 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
gem。下面是如何删除它
也许这不是您想要的,但是它们以这种方式实现了效果:页面内容开始隐藏。即使在单击后退按钮时也是如此,因为隐藏的内容在标记中的样式或类中声明。然后是javascript代码,在ready事件之后的内容中淡出:
$('#content').fadeIn(800);
- 我的jQuery插件参数没有正确启动,遇到了问题
- chrome扩展:尽管运行了at:documentidle,js脚本还是过早启动
- 从控制器返回后Ajax启动事件激发
- 铬:“;未捕获的语法错误:意外的标记:"
- Meteor上的启动页面
- 如何防止网页加载后自动启动功能
- 可以设置“;文件名"发生错误时显示的内联脚本标记的
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 检测电话窃听,即:<a href="电话:xxx">在UIWebview上
- 如何从JavaScriptInterface启动Navigation Drawer
- 使用“+="操作人员
- window.on.scroll事件未启动
- //而不是在src=“”上使用http://"属性
- "未捕获的语法错误:意外的标记}"
- 可以<脚本类型=“;text/javascript”>window.location=“/"</
- 为什么要用"立即:false”;不会't关闭弹出窗口并启动回调
- 如何启动窗口.onload“onload"
- "获得身份验证”;首次启动时循环forver
- 隐藏按钮onClick=“"然后启动以下方法调用
- "点击“;事件处理程序未启动