使用 URL 哈希保留 Ajax 页面状态答案

【问题标题】：Preserving Ajax page state with URL hash使用 URL 哈希保留 Ajax 页面状态
【发布时间】：2011-07-23 21:58:16
【问题描述】：

我的网站上有一个页面有两组选项卡，每个选项卡的链接都是 ajax 驱动的，但有一个适当的 href 以防 javascript 未启用。我即将使用诸如 jQuery Address 之类的插件来实现一个 ajax 'back-button' 解决方案。

我对这个解决方案的问题/困惑是，在 javascript 有机会解析哈希并加载正确的内容之前，页面的默认内容仍然被加载。如果我最初隐藏内容，非 JavaScript 用户将永远看不到任何内容。如果我最初不隐藏内容，用户会在更新之前看到错误的页面（除了首先加载错误的选项卡然后加载正确的选项卡的额外开销）。

处理此问题的最佳/最常用方法是什么？

谢谢，布赖恩

【问题讨论】：

标签： ajax hash back-button particles

【解决方案1】：

我认为这是一个很好的问题。您是否尝试过使用 <noscript> 标记来包含显示最初为 JS 用户隐藏的内容的 css。像这样的：

<style type="text/css">
  #area-1, #area-2 { display: none; }
</style>

<noscript>
  <style type="text/css">
    #area-1, #area-2 { display: block; }
  </style>
</noscript>

希望这会有所帮助！

【讨论】：

非常聪明，这可以工作。但它仍然需要首先加载错误内容的开销（即使它没有显示）......但是，我感觉可能没有完美的解决方案。感谢您的帮助。
@brian 好的，既然我看到了你接受的答案，我更清楚你在问什么 :) 很高兴能提供一点帮助。
我实际上选择了您的建议，因为由于时间限制，我将无法完成服务器端解决方案。所以，再次感谢。

【解决方案2】：

如果你使用哈希，你总是首先会得到错误的内容。您需要使用带有 HTML5 History API 的服务器端解决方案来避免这种情况。 Read more

您可以使用： https://github.com/browserstate/ajaxify

并让标签在服务器端呈现if ( $_GET['tab'] === '2' ) // render 2之类的东西

【讨论】：

这是我正在寻找的讨论。谢谢。