logo标签列表

jQuery页面过渡和浏览器历史记录

jquery
7
我正在使用jQuery实现网页淡入效果，这个效果很好。但是，当我在浏览器中点击后退按钮时，我会跳转到正确的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;
 }
4个回答
8
1

新版本的浏览器在使用“后退”和“前进”按钮时更好地保留了先前的页面以便显示。因此，可能发生的情况是，在$("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有自己的页面缓存机制（这会影响Safari和Chrome）。

还应该注意，jQuery的.ready()函数与window.load()函数不是相同的东西。请参阅文档以获取更多详细信息。对于.ready()函数的源代码也非常有帮助。

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

这还不够，因为 body onload 函数仍然应该执行，js 脚本也应该执行。 - Nealv
这取决于浏览器。显然，Chrome 6正在重新执行body onload事件。但是FireFox 3.5没有。http://www.thomasfrank.se/when_onload_fails.html - James Sumners
天啊，我甚至不知道在触发jQuery时浏览器会有差异。好好知道了，谢谢。 - Rembrand
0
在上面的函数中，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';

来源：点击后退按钮时是否有跨浏览器的onload事件？

所以它涉及到浏览器历史记录/缓存。我会在周一回到工作时尝试一下。谢谢！ - Rembrand
尝试使用修改后的代码，但Firefox 3.5并没有做到。嗯，好吧，如果只是在那一个版本上有问题，我现在可以忍受它。无论如何，还是谢谢，我会进一步研究的。 - Rembrand
嗨，看起来之前的评论上面的那个可能更好。https://dev59.com/H3VC5IYBdhLWcg3w4VRz#201406 - Sandro
您可以在body标签中添加onunload=""，这样浏览器就不会缓存该页面。 - Sandro
0
通常情况下，当您点击后退按钮时，页面会被缓存，因此您的 $(document).ready() 函数将不会触发。
尝试为页面设置 no-cache。
啊，这与Sandro的解决方案有关。谢谢。 - Rembrand
嗯，我尝试使用$.ajaxSetup {cache：false}）; 但在Firefox中似乎没有太大作用。 - Rembrand
在Firefox中有解决方案，感谢Gobygoba提供的代码 :) - Rembrand
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接