Question

我有一个具有挑战性的问题，我现在已经争斗了一段时间。

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

我的网站使用了一些基本的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？

有人可以建议正确的代码吗？

Answer 1

免责声明：以下内容并不是一个强大的解决方案，但我发现它很有趣并认为我应该分享。

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

我只在一个版本的Firefox上测试了这个，所以YMMV，但请尝试以下方法：

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

Answer 2

上述答案触及了问题，但提供了解决问题的黑客方法。这似乎是正确的方法。

$(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.");
        }
}

Answer 3

查看此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

浏览器“后退”按钮与jQuery动画页面

3 个答案: