Question

我使用Laravel构建了一个Web应用程序。 Page A 有一个下拉列表，当用户选择一个选项时，ajax结果会显示在列表下方。用户可以单击ajax结果中的任意行，然后转到页面B 。当用户点击Opera和Firefox中的后退按钮时，他选择的选项以及AJAX结果将被保留，但在Chrome和IE中，只保留他选择的选项。如何使Chrome和IE像Firefox和Opera一样工作。

研究，我被告知Chrome不支持bfcache，这就是原因。他们有什么工作吗？

我的后退按钮的代码如下：

<div id="app-back-button">
  <a href="#" onclick="history.back(); return false;">
    <img alt="Back" border="0" src="{{ asset('images/general/back.png') }}" class="img-responsive" />
  </a>
</div>

Answer 1

尝试这个希望对您有帮助的人...

jQuery(document).ready(function($) {

  if (window.history && window.history.pushState) {

    window.history.pushState('forward', null);

  }
});

Answer 2

我不认为照顾bfcache是值得的，除非它停止刷新＆＃39;。有趣的部分是想要浏览器而不是刷新＆＃39;保持结果。

您可以将ajax结果保存到本地存储，当您的页面加载时，它会尝试显示本地数据，当您点击按钮时，页面将正常发送ajax并更新本地存储。

不要依赖bfcache，这是一团糟。

Answer 3

将选择内容保存在Cookie中。（我建议使用js-cookie。）如果用户返回到页面A，请检查cookie。如果存在，请选择正确的列表项并触发应该触发ajax请求的处理程序。

因此，在ajax代码结果中，将结果添加到列表下方，添加cookie。最简单的方法是在选择列表中为每个选项添加ID，这样您就可以将ID添加为cookie值。

在ajax toString().split(",")处理程序中：

done

然后在第A页的文件准备好你运行检查：

Cookies.set('pageA-selection', 'SelectedId');

谷歌浏览器中的后退按钮不保留Ajax结果，但在其他主要浏览器中运行良好

3 个答案: