为什么 Firefox 5 忽略 document.ready？答案

【问题标题】：Why does Firefox 5 ignore document.ready?为什么 Firefox 5 忽略 document.ready？
【发布时间】：2011-10-12 07:40:46
【问题描述】：

为什么 Firefox 5.0.1 在按下返回按钮时不刷新此页面？

<html>
<head>
  <meta http-equiv="cache-control" content="no-cache">
  <script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>   
  <script>
  $(document).ready(function() { alert('ready'); });
  $(window).load(function() { alert('load'); });
  </script>
</head>
<body>
  <form action="http://www.google.com" method="get">
  <input name="q" type="text"> 
  <input type="submit">
  </form>
</body>
</html>

重现步骤：

点击“提交按钮”
按回
document.ready 或 window.load 都不会触发

更新：

这将强制 Firefox 重新加载页面：

$(window).unload(function() {});

但是，我最终使用了这个：

window.addEventListener('pageshow', function() {alert('pageshow'); }, false);

【问题讨论】：

+1 Firefox 不会重新加载任何资源，也不会在“按返回”时触发任何回调。我已经用 firebug 调试过了
$(document).ready() 似乎对我有用...至少在 jsfiddle iframe 中 -> jsfiddle.net/qwRPS
@Tomm yes ready 在你的 jsfiddle.net 示例中为我触发，现在如何让我的独立示例工作。

标签： jquery html firefox

【解决方案1】：

请参阅Ajax, back button and DOM updates 和Restore object classes on back button in Firefox，了解 Firefox 的页面缓存，它存储页面的整个状态并且在大多数情况下不会触发加载事件。如果你想避免让 Firefox 保存你的页面状态（这取决于你在页面中拥有什么样的状态），看起来你可以通过为页面注册一个卸载事件来让它跳过它。因为卸载事件可能会使页面状态无效，如果您有一个卸载事件，Firefox 不会缓存页面状态，并且后退按钮会在后退按钮上重新加载页面，并且所有正常的加载事件都会触发。

【讨论】：

这将减慢后退按钮的速度，这意味着您将不会以与离开时相同的状态返回页面，尤其是在您与页面上的元素进行交互时。这会稍微破坏用户体验。如果您监听 pageshow 事件，则不需要这样做。

【解决方案2】：

为什么 Firefox 5.0.1 在按下返回按钮时不刷新此页面？

因为它不需要。

当您在 Firefox 中“返回”时，Firefox 可以完全从后退按钮缓冲区加载页面，那么您要返回的不是新页面，而是返回到您之前离开它的确切状态的页面如果两者之间没有发生任何事情，这包括所有 Javascript 代码和变量的状态。就您的脚本（和 jQuery）而言，ready() 已经触发。如果已经触发，jQuery 将不会再次触发它。

您可能想要的是listen to the 'pageshow' event，当页面从缓冲区重新加载时，Firefox 会触发它，即使它的状态完全保留。

【讨论】：

你读懂了我的想法，pageshow 为我的真正目的工作（重新启用提交按钮，我禁用了）
这真的取决于你想要什么。有时您希望 Firefox 完全恢复您的状态（在这种情况下，您可能甚至不需要为 pageshow 做任何事情）。或者，有时您可能想从头开始重新初始化页面（在这种情况下，您想绕过 Firefox 的状态缓存）。重要的是有意识地决定哪个适合您的页面并为此进行设计。