Question

我正在使用jQuery在我的html页面上有一个淡入效果，这很好用。但是，当我点击浏览器中的后退按钮时，我会转到正确的URL，但会得到一个空白页面。这是一个浏览器缓存的东西吗？我对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 attribut：

<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也有自己的page caching机制（会影响Safari和Chrome）。

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

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

Answer 3

在上面的函数中，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（文档）.ready（）。您可以在页面顶部附近试一试。

history.navigationMode = 'compatible';

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

Answer 4

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

尝试为页面设置no-cache。

jQuery页面转换和浏览器历史记录

4 个答案: