jQuery页面转换和浏览器历史记录
我正在使用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; } 这是因为您的页面位于“bfcache”中（请参阅Firefox文章 ）。 对于禁用bfcache，您只需添加onunload attribut：
来源： Ajax，后退按钮和DOM更新 ， 单击后退按钮时是否存在跨浏览器onload事件？
当您使用后退和前进按钮时，较新的浏览器最好保持以前的页面准备好显示。 所以可能发生的事情是你的浏览器只是在$("body").fadeOut(500, redirectPage);之后重新显示页面$("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()方法（如果存在）。
通常，当您点击后退按钮时会缓存页面，您的$（document）.ready（）函数将不会触发。
尝试为页面设置no-cache。
在上面的函数中，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';
来源： 单击后退按钮时是否存在跨浏览器的onload事件？