浏览器“返回"按钮与 jQuery 动画页面 [英] Browser "Back" Button vs. jQuery-animated page

问题描述

我遇到了一个具有挑战性的问题，我已经解决了一段时间了.

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

我的网站使用一些基本的 jQuery 动画.每个页面的初始状态下，主要内容都隐藏在浏览器窗口的下边缘下方，当窗口加载时，主要内容动画显示在浏览器中.当访问者单击任何菜单链接时，主要内容会再次滚动并消失在浏览器窗口的上边缘上方 - 然后加载新页面.整个事情都是通过这两段代码实现的:

//从浏览器窗口下方动画内容$('#maincontent').animate({top: "15%"}, 2000);

和

//动画内容向上隐藏在浏览器窗口上方$('#menu a').click(function(event) {event.preventDefault();var href = this.href;$('#maincontent').animate({顶部:'-300%'}, 500,功能() {window.location = href;});});

问题:当点击浏览器后退按钮时，如何让页面显示在初始状态?

我浏览了 StackOverflow 有一段时间了.人们问了很多这个问题，但似乎没有人找到真正有效的解决方案.建议包括阻止页面被缓存 –(不起作用，即使它起作用，也不会非常高效，因为某些页面确实需要缓存) – 重新加载页面(导致一些特殊行为，最终不会)t 工作，要么) - 使用 cookie(在任何地方都没有给出具体的代码示例)或使用 php(在任何地方都没有给出具体的代码示例).我在这个网站上问了几个关于 in 的问题，并收到了一些建议，但没有一个在我的情况下有效.因此，在几个不眠之夜之后，我想问一下是否有人真的可以帮助解决这个问题.

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

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

//动画内容向上隐藏在浏览器窗口上方$('#menu a').click(function(event) {event.preventDefault();var href = this.href;$('#maincontent').animate({顶部:'-300%'}, 500,功能() {//重新加载同一页面的代码，类似于//window.location = window.location;其次是window.location = href;});});

-- 但我只是不知道如何正确编写它.

或者，也许可以将页面的 css 值重置为 css 文件中的默认值并再次触发 JavaScript?

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

解决方案

免责声明:以下内容并不完全是一个强大的解决方案，但我觉得它很有趣，并认为我应该分享.>

我过去也有类似的需求，奇怪的是，我最终得到的解决方案是降级到 jQuery 以利用 jQuery 1.3 中的一个错误.

我只在一个版本的 Firefox 上测试过，所以 YMMV，但请尝试以下操作:

• 使用 jQuery 1.3 - 单击链接时会重复动画，然后来使用后退按钮返回
• 使用 jQuery 1.4 - 这不会

这对于我的用例来说已经足够了，因为我的目标受众有限并且只很少使用 jQuery.也就是说，我正在热切关注这个帖子，希望能找到更好的解决方案.

更新

根据上述 jquery 错误的踪迹，您似乎可以通过禁用 bfcache 获得相同的效果.

最简单的方法是添加onunload 属性到正文.(链接中有更多详细信息).

这是一个使用 jquery 1.6 的示例.再一次，没有经过彻底的测试天啊.

• 使用 jQuery 1.6，禁用 bfcache

I have a challenging problem I've been battling for some time now.

The Problem: when I go back to previous page using browser's back button, the page is displayed in its final state after all the animations had played. I want it to display in its initial state and replay the animations.

My site uses some basic jQuery animation. The initial state of each page has the main content hidden below the lower edge of the browser window, When the window loads, the main content animates up to appear in the browser. When a visitor clicks any menu link, the main content rolls up again and disappears above the upper edge of the browser window - and then the new page loads. The whole thing is achieved with these two bits of code:

//Animate the content up from below the browser window

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

and

//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;
    });
});

The Question: how do I make the page display in its initial state when the browser back button is clicked?

I browsed StackOverflow for some time. People asked about this issue a lot but no one seem to have arrived to a solution that really worked. Suggestions include blocking the page from being cached – (doesn't work, and even if it worked, wouldn't be very productive because some pages do need to be cached) – reloading the page (leads to some peculiar behaviors and ultimately doesn't work, either) - using cookies (no specific example of code is given anywhere) or using php (no specific example of code is given anywhere). I asked several questions about in on this site and received a number of suggestions but none of them worked in my situation. So after a couple of sleepless nights I want to ask if someone can really help with this.

If someone had dealt with that probelm before successfully, I would be grateful if you could share your expert knowledge and suggest a workable solution!

NEW EDIT: I think I may have found a solution, but I want someone's help with jQuery/JavaScript syntax. I want to try to modify the code to add one more action to it, but I'm not sure how to write it, so that the page reloads a moment before the location is changed to the new page So instead of the second snippet shown above, I want to write something like this:

//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;
    });
});

-- but I just don't know how to write it correctly.

Alternatively, perhaps it's possible to reset the css values of the page to the the default ones from the css file and trigger JavaScript again?

Could someone advice the proper code please?

解决方案

Disclaimer: The following isn't exactly a robust solution, but I found it amusing and thought I ought to share.

I had a similar requirement in the past, and strangely enough, the solution I ended up with was to downgrade to jQuery to take advantage of a bug in jQuery 1.3.

I only tested this on one version of Firefox, so YMMV, but try the following:

• Using jQuery 1.3 - this repeats the animation when you click the link then come back with the back button
• Using jQuery 1.4 - this doesn't

This was sufficient for my use-case since I was targeting a limited audience and only made minimal use of jQuery. That said, I'm eagerly watching this thread in a hope of finding a better solution.

Update

Following the trail of the above stated jquery bug, it looks like you can get the same effect by disabling the bfcache.

The simplest way to do would be to add an onunload attribute to body. (more details in link).

<body onunload=''>

Here's an example, which uses jquery 1.6. Again, not thoroughly tested so YMMV.

• Using jQuery 1.6, with bfcache disabled

这篇关于浏览器“返回"按钮与 jQuery 动画页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！