jQuery 页面转换和浏览器历史

Question

我正在使用 jQuery 在我的 html 页面上产生淡入效果，效果很好。但是，当我在浏览器中点击后退按钮时，我会转到正确的网址，但会得到一个空白页面。这是浏览器缓存的事情吗？我对 jQuery 比较陌生，我不确定如何解决这个问题。 这是网站：http://www.e-preview.be/huyzewaterloos/nl/index.html

我使用的代码是这样的：

//page transition
    $("body").css("display", "none");
    $("body").fadeIn(1500);
  $("a.transition").click(function(event){
   event.preventDefault();
   linkLocation = this.href;
   $("body").fadeOut(500, redirectPage);
  });

 function redirectPage() {
  window.location = linkLocation;
 }

Answer 1

这是因为您的页面位于“bfcache”中（请参阅a Firefox article）。要禁用 bfcache，您只需添加一个 onunload 属性：

<body onunload="">

来源：Ajax, back button and DOM updates 和 Is there a cross-browser onload event when clicking the back button?

Answer 2

当您使用后退和前进按钮时，较新的浏览器可以更好地保持之前的页面准备好显示。因此，可能发生的情况是您的浏览器只是在 $("body").fadeOut(500, redirectPage); 完成执行后重新显示页面。也就是说，单击后退按钮后显示的页面应用了样式body { display: none; }。

使用 Chrome “6.0.472.51 beta” 使用后退和前进按钮导航您的页面没有问题。当我使用 Firefox 3.5 时，我在使用后退按钮返回索引页面时看到了所描述的问题。使用 Firebug，我能够确认 body 元素的样式设置为 display: none。

所以您看到的是 FireFox 的 bfcache 将页面保持在以前的状态，JavaScript 和所有。如果您希望 Firefox 重新触发您的淡入代码，您可以将其附加到 Firefox 的 pageshow 事件。同样，WebKit 有自己的pagecaching 机制（会影响 Safari 和 Chrome）。

还应注意，jQuery .ready() 函数与window.load() 函数不相同。有关详细信息，请参阅documentation。 .ready() 函数的 source code 也很有帮助。

总结一下：$.ready() 执行的代码是在页面实际呈现之前执行的。在较新的浏览器中，当您离开页面时，浏览器很可能会将该页面的状态完全保存为您离开时的状态。因此，当您使用浏览器的后退按钮返回页面时，该页面不会被重新渲染。也就是说，DOM 不会被重建，$.ready() 函数也不会被重新触发。如果您有代码需要在每次页面显示时运行，然后将代码附加到pageshow() 方法（如果存在）。

Answer 3

通常，当您点击后退按钮时页面会被缓存，您的 $(document).ready() 函数不会触发。

尝试为页面设置无缓存。

Answer 4

在上面的函数中，linkLocation 变量不再可用，因为它超出了范围。

试试这个：

$("body").css("display", "none");
$("body").fadeIn(1500);
$("a.transition").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("body").fadeOut(500, function() {
        window.location = linkLocation;
    });
});

编辑：所以我修复了您的代码，但这不是问题所在。 :)

显然，当您点击后退按钮时，不会触发 jQuery(document).ready()。您可以在页面顶部附近尝试此操作。

history.navigationMode = 'compatible';

来源：Is there a cross-browser onload event when clicking the back button?