对于所有主流浏览器(IE除外),onload由于后退按钮操作,页面加载时不会触发JavaScript 事件 - 它仅在首次加载页面时触发.
有人能指出我解决这个问题的一些示例跨浏览器代码(Firefox,Opera,Safari,IE,...)吗?我很熟悉Firefox的pageshow活动,但不幸的是Opera和Safari都没有实现这一点.
如果javascript修改了页面A中的DOM,则用户导航到页面B,然后点击返回按钮返回页面A.对页面A的DOM的所有修改都将丢失,并且向用户显示最初从服务器检索的版本.
它在stackoverflow,reddit和许多其他流行的网站上以这种方式工作.(尝试在此问题中添加测试评论,然后导航到不同的页面并点击返回按钮返回 - 您的评论将"消失")
这是有道理的,但一些网站(apple.com,basecamphq.com等)在某种程度上迫使浏览器为用户提供最新的页面状态.(转到http://www.apple.com/ca/search/?q=ipod,单击顶部的"下载"链接,然后单击"返回"按钮 - 将保留所有DOM更新)
来自哪里的不一致?
我有一个具有挑战性的问题,我一直在争夺一段时间.
问题:当我使用浏览器的后退按钮返回上一页时,在播放完所有动画后,页面将以最终状态显示.我希望它以初始状态显示并重放动画.
我的网站使用了一些基本的jQuery动画.每个页面的初始状态都隐藏在浏览器窗口下边缘下方的主要内容中.当窗口加载时,主要内容会动画显示在浏览器中.当访问者单击任何菜单链接时,主内容会再次卷起并消失在浏览器窗口的上边缘之上 - 然后加载新页面.使用这两段代码完成整个过程:
//Animate the content up from below the browser window
$('#maincontent').animate({top: "15%"}, 2000);
Run Code Online (Sandbox Code Playgroud)
和
//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;
});
});
Run Code Online (Sandbox Code Playgroud)
问题:当单击浏览器后退按钮时,如何使页面显示为初始状态?
我浏览了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({ …Run Code Online (Sandbox Code Playgroud)