浏览器“返回”按钮与jQuery-动画页面

我有一个具有挑战性的问题，我一直在奋战一段时间。浏览器“返回”按钮与jQuery-动画页面

问题：当我使用浏览器的后退按钮返回上一页时，在所有动画播放完毕后，页面将以最终状态显示。我希望它以初始状态显示并重播动画。

我的网站使用了一些基本的jQuery动画。每个页面的初始状态的主要内容都隐藏在浏览器窗口的下边缘之下，当窗口加载时，主要内容将动画显示在浏览器中。当访问者点击任何菜单链接时，主要内容会再次滚动并消失在浏览器窗口的上边缘之上 - 然后加载新页面。

//Animate the content up from below the browser window 

$('#maincontent').animate({top: "15%"}, 2000);

和

//Animate the content up to hide above the browser window 

$('#menu a').click(function(event) { 
    event.preventDefault(); 
    var href = this.href; 
    $('#maincontent').animate({ 
     top: '-300%' 
    }, 500, 
    function() { 
     window.location = href; 
    }); 
});

的问题：如何使在它的初始状态页面显示的浏览器的后退按钮被点击时，整个事情与这些代码两位实现？

我浏览了一段时间的StackOverflow。人们问了很多这个问题，但似乎没有人到达真正有效的解决方案。建议包括阻止页面被缓存 - （不起作用，即使它工作，也不会很有成效，因为有些页面确实需要缓存） - 重新加载页面（导致一些特殊的行为，最终导致无法访问）或者使用cookie（没有给出任何具体的代码示例）或使用php（没有给出任何具体的代码示例）。我在本网站上询问了几个关于此问题的问题，并收到了一些建议，但其中没有一个适用于我的情况。所以在经历了几个不眠之夜之后，我想问问是否有人能够真正帮助这个。

如果有人在成功之前处理过这个问题，我将不胜感激，如果您能分享您的专业知识并提出可行的解决方案！

新编辑：我想我可能已经找到了解决方案，，但我希望有人对jQuery/JavaScript语法的帮助。我想尝试修改代码以向其添加一个更多操作，但我不确定如何编写它，以便页面在位置更改为新页面之前重新加载因此，而不是第二个上面显示的片段，我想写这样的事情：

//Animate the content up to hide above the browser window 

$('#menu a').click(function(event) { 
    event.preventDefault(); 
    var href = this.href; 
    $('#maincontent').animate({ 
     top: '-300%' 
    }, 500, 
    function() { 
    // a code that reloads the same page, something like 
    //window.location = window.location; followed by 
     window.location = href; 
    }); 
});

- 但我只是不知道如何正确书写它。

或者，也许有可能将页面的css值重置为来自css文件的默认值，并再次触发JavaScript？

请问有人能建议正确的代码吗？

来源

2011-06-02 Dimitri Vorontzov

怎么样的window.onload？ – mihsathe 2011-06-02 14:36:01

是的，它呢？ – 2011-06-02 14:36:20

免责声明：以下是不完全是一个强大的解决方案，但我发现很有趣，我想我应该分享。

我在过去有类似的要求，奇怪的是，我最终解决的解决方案是降级到jQuery以利用a bug in jQuery 1.3。

我只测试了在Firefox的一个版本，所以因人而异，但请尝试以下操作：

Using jQuery 1.3 - 此重复播放动画当你点击链接，然后与后退按钮
Using jQuery 1.4回来 - 这不是

这是足够的我的用例，因为我针对的是有限的受众，只是最小限度地使用jQuery。也就是说，我正在热切关注这个主题，希望找到一个更好的解决方案。

更新

继上述的jQuery错误的踪迹，它看起来像你可以通过禁用bfcache获得同样的效果。

最简单的方法是add an onunload attribute to body。（更多详情请参阅链接）。

<body onunload=''>

下面是一个使用jquery 1.6的示例。再次，没有经过彻底测试，所以 YMMV。

Using jQuery 1.6, with bfcache disabled

来源

2011-06-02 17:24:18

这很棒，绝对非常有用。事实上，到目前为止，这是我在StackOverflow上找到的唯一实际工作的解决方案！是的，这是一种胶带解决方案，但谁在乎？非常感谢你做的这些！当然，我会非常感兴趣的是为任何版本的jQuery寻找解决方案，但我会始终让你的回归。谢谢Shawn！ – 2011-06-02 17:33:41

非常欢迎。 – 2011-06-02 17:36:20

你钉死了！你是天才肖恩！ – 2011-06-02 18:39:36

看看这个thread。他建议如下所示的黑客攻击（从那里复制）：

当用户点击后退按钮时应激发onload事件。未通过JavaScript创建的元素将保留其值。我建议保留INPUT TYPE =“hidden”或TEXTAREA中用于动态创建元素的数据的备份，使其显示：none，然后使用文本框的值onload重新构建动态元素。

如果你不关心重建的页面，并希望实际加载它，那么你可以做：代码：

<input type="hidden" id="refreshed" value="no"> 
<script type="text/javascript"> 
onload=function(){ 
var e=document.getElementById("refreshed"); 
if(e.value=="no")e.value="yes"; 
else{e.value="no";location.reload();} 
} 
</script>

可以使隐藏的价值为“是”的#menu点击。

HTH

来源

2011-06-02 16:50:16 Raja

是的，我以前试过，它没有工作。也许你可以向我解释如何让它工作拉贾。这段代码应该放在页面上？我认为它不在标题中，对吗？我尝试将它放在body标签的顶部和底部，并在关闭html标签之前，它不起作用。是否应该以某种方式纠正？此外，你可以告诉我的代码，在菜单点击更改隐藏的值为“是”？ – 2011-06-02 17:02:07

以上答案触及问题，但提供哈克的方式来解决这个问题。这似乎是正确的做法。

$(window).bind('pageshow',function(){ 
    alert("This page will run even if the back button was pressed!"); 
});

想了解更多关于pageshow/pagehide事件在这里看到： http://www.webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/

你可以可以把它一步是这样的：

$(window).bind('pageshow',function(e){ 
     if (e.persisted) { 
      alert("pageshow event handler called. The page was just restored from the Page Cache."); 
     } else { 
      alert("pageshow event handler called for the initial load. This is the same as the load event."); 
     } 
}

来源

2011-06-15 22:18:49

浏览器“返回”按钮与jQuery-动画页面

回答

相关问题