监控 location.hash 是 XHR 应用程序中历史记录的解决方案吗？

Question

众所周知，在 XHR（又名 AJAX）Web 应用程序中，不会构建应用程序的历史记录，并且单击刷新按钮通常会将用户移出他/她当前的活动。 我偶然发现 location.hash （例如 http://anywhere/index.html#somehashvalue）来规避刷新问题（使用 location.hash 通知您的应用程序其当前状态并使用页面加载处理程序重置该状态）。 这真的很好而且很简单。

这让我考虑使用 location.hash 来跟踪我的应用程序的历史记录。 我不想使用现有的库，因为它们使用 iframe 等。所以这是我的一点一毛钱：当应用程序页面加载时，我启动这个：（

setInterval(
       function(){
           if (location.hash !== appCache.currentHash) {
               appCache.currentHash = location.hash;
               appCache.history.push(location.hash);
               /* ... [load state using the hash value] ... */
               return true;
           }
           return false;
       }, 250
 );

appCache 是包含应用程序变量的预定义对象）想法是从哈希值触发应用程序中的每个操作。 在不错的浏览器中，哈希值更改会向历史记录添加一个条目，而在 IE (<= 7) 中则不会。 在所有浏览器中，向后或向前导航到具有另一个哈希值的页面不会触发页面刷新。 这就是间隔函数发挥作用的地方。 通过该函数，每次检测到哈希值更改（以编程方式或通过单击后退或前进），应用程序都可以采取适当的操作。 该应用程序可以跟踪它自己的历史记录，并且我应该能够在应用程序中显示历史记录按钮（特别是对于 IE 用户）。

据我所知，这可以跨浏览器工作，并且在内存或处理器资源方面没有成本。 所以我的问题是：这是否是管理 XHR 应用程序历史记录的可行解决方案？ 优缺点都有什么？

更新：因为我使用自制框架，所以我不想使用现有框架之一。 为了能够在 IE 中使用 location.hash 并将其记录在历史记录中，我创建了一个简单的脚本（是的，它需要一个 iframe），这可能对您有用。 我在我的网站上发布了它，请随意使用/修改/批评它。

Answer 1

大多数解决方案往往会混淆 3 个问题：

1. 后退按钮
2. 可书签性
3. 刷新按钮

基于 window.location.hash 的解决方案可以在大多数情况下解决所有三个问题： hash 中的值 映射到应用程序/网页的状态，因此用户可以按“后退”/“前进”/“刷新”之一并跳转到哈希中现在的状态。 他们还可以添加书签，因为地址栏中的值已更改。 （请注意，与不影响浏览器历史记录的哈希相关的 IE 需要隐藏的 iframe）。

不过，我只是想指出，仅使用 iframe 解决方案也可以在不监视 window.location.hash 的情况下使用，这也是一个非常有效的解决方案。

谷歌地图就是一个很好的例子。 为每个用户操作捕获的状态太大，无法放入 window.location.hash（地图质心、搜索结果、卫星与地图视图、信息窗口等）。 因此，他们将状态保存到嵌入隐藏 iframe 中的表单中。 顺便说一句，这也解决了[软]“刷新”问题。 他们通过“链接到此页面”按钮单独解决可书签性问题。

我只是认为值得了解/分离您正在考虑的问题领域。

Answer 2

我认为你会很难知道用户是前进还是后退。
假设 url 以 /myapp#page1 开头，那么您就开始跟踪状态。
然后用户执行一些操作来使 url /myapp#page2
然后用户执行某些操作以再次生成 url /myapp#page1。 现在他们的历史是模糊的，你不知道要删除什么或不删除什么。

历史框架使用 iframe 来解决您提到的浏览器不一致问题。 您只需在需要 iframe 的浏览器中使用它们即可。

另一个缺点是，用户总是会先选择浏览器的后退按钮，然后再选择您的自定义后退按钮。 我感觉每 250 毫秒读取历史记录的延迟也会很明显。 也许你可以把间隔做得更紧，但我不知道这是否会让事情表现得很糟糕。

我使用过 yui 的历史记录管理器，虽然它并不是在所有浏览器（尤其是 ie6）中始终完美工作，但它已经被很多用户和开发人员使用。 他们使用的模式也非常灵活。

Answer 3

所有这些东西对于支持全系列浏览器都很重要，但希望它的需求将会消失。 IE8 和 FF3.6 都引入了对 onhashchange 的支持。 我想其他人也会效仿。 在使用超时或 iframe 之前检查此功能的可用性是一个好主意，因为它确实是目前最好的解决方案 - 而且它甚至可以在 IE 中工作！