返回按钮/bfcache:通过jquery隐藏在DOM中的对象在返回时再次可见

Back button / bfcache: Object hidden in DOM via jquery is visible again when going back?

本文关键字：返回 对象 DOM bfcache 通过 jquery 按钮 隐藏      更新时间：2023-09-26

我有一个网页，第一次访问时会出现一个框。

在网站的其他部分，有"后退"按钮，当然还有浏览器后退按钮。

但是，当使用后退按钮（浏览器或html）时，该框将再次可见。

有没有办法确保盒子在回去时不会再次显示？即使使用.remove()完全移除对象也不起作用。

我在这里做了一个jsbin的例子：

http://jsbin.com/losilu/2/

首先，单击链接隐藏框，然后单击第二个链接继续。

HTML:

  <div id="hide-on-back">
    Make this go away
  </div>
  <a href="#" id="hide-box">1. Click First To Hide</a><br/>
  <br/>
  <a href="http://jsbin.com/tipup/1/">2. Go Forward</a>

JS:

$(document).ready(function(){
  $('a#hide-box').click(function(e){
    e.preventDefault();
    $('#hide-on-back').fadeOut();
  });
});

HTML/JS（返回按钮）:

<a id="go-back" href="#" onclick="function(){history.go(-1);}">Go Back</a>

一旦重新加载页面，您通过javascript对dom所做的任何修改都将重置为其初始状态。因此，要么使用ajax（例如，我相信使用jquery.load）来避免重新加载整个页面，要么提供一个可以通过jquery检查的url参数（获取url参数jquery或如何在js中获取查询字符串值）

最后的解决方案是使用cookie保存信息。

相关文章：