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

发布于 2024-11-11 18:03:26 字数 1796 浏览 3 评论 0原文

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

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

我的网站使用一些基本的 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（任何地方都没有给出具体的代码示例）。我在这个网站上问了几个关于 in 的问题，并收到了一些建议，但没有一个适合我的情况。因此，经过几个不眠之夜后，我想问是否有人可以真正帮助解决这个问题。

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

新编辑：我想我可能已经找到了解决方案，但我需要有人在 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？

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

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一向肩并 2024-11-18 18:03:26

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

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

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

对我的用例来说已经足够了，因为我的目标受众有限，并且只使用了最少的 jQuery。也就是说，我热切地关注这个线程，希望找到更好的解决方案。

更新

跟踪上述 jquery bug，看起来您可以通过禁用 bfcache 获得相同的效果。

最简单的方法是添加一个onunload 属性到正文。（链接中有更多详细信息）。

<body onunload=''>

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

使用 jQuery 1.6，禁用 bfcache

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

回复收藏 0 原文

不打扰别人 2024-11-18 18:03:26

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

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

The above answers touch on the problem, but provide hacky ways to solve the question. This seems to be the proper way to do it.

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

To read more on the pageshow/pagehide events see here:
http://www.webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/

You could can take it a step further like this:

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

回复收藏 0 原文

暖心男生 2024-11-18 18:03:26

查看此线程。他建议如下进行黑客攻击（从那里复制）：

当用户点击后退按钮时，应该触发 onload 事件。不是通过 JavaScript 创建的元素将保留其值。我建议在 INPUT TYPE="hidden" 或设置为 display:none 的 TEXTAREA 中保留动态创建的元素中使用的数据的备份，然后使用文本框的值将动态元素重建为原来的方式。

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

<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单击上将隐藏值设置为“是”。

华泰

Check out this thread. He suggests a hack as given below (copied from there):

The onload event should be fired when the user hits the back button. Elements not created via JavaScript will retain their values. I suggest keeping a backup of the data used in dynamically created element within an INPUT TYPE="hidden" or TEXTAREA set to display:none then onload using the value of the textbox to rebuild the dynamic elements to the way they were.

If you don't care about rebuilding the page and want to actually reload it, then you could do:
Code:

<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>

you can make the hidden value as "Yes" on #menu click.

HTH

回复收藏 0 原文

~没有更多了~