监控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-apps历史的可行解决方案？优缺点都有什么？

更新:因为我使用我的自制框架,我不想使用现有的框架之一.为了能够在IE中使用location.hash并将其包含在历史中,我创建了一个简单的脚本(是的,它需要一个iframe),这可能对你有用.我在我的网站上发布它,随意使用/修改/批评它.

Answer 1

大多数解决方案都有三个问题可能会聚集在一起:

1. 返回键
2. bookmarkability
3. 刷新按钮

该window.location.hash基础的解决方案可以解决所有这三个在大多数情况下:在值hash映射到应用程序/网页的状态,这样用户就可以按"后退" /"前进" /"刷新",现在跳转至状态之一哈希.它们也可以添加书签,因为地址栏中的值已更改.(请注意,iframe与不影响浏览器历史记录的哈希相关的IE需要隐藏).

我只想注意,只有iframe解决方案才能使用,而无需监控window.location.hash非常有效的解决方案.

Google地图就是一个很好的例子.为每个用户操作捕获的状态太大而无法放入window.location.hash(地图质心,搜索结果,卫星与地图视图,信息窗口等).因此,他们将状态保存为嵌入隐藏状态的表单iframe.顺便说一句,这也解决了[soft]"刷新"问题.它们通过"链接到此页面"按钮单独解决书签功能.

我只是认为知道/分离您正在考虑的问题域是值得的.

Answer 2

我想你会有一个棘手的时间知道用户是前进还是后退.假设网址启动/ myapp#page1,以便您开始跟踪状态.然后用户做了一些事情来制作url/myapp#page2然后用户再做一些东西来制作url/myapp#page1.现在他们的历史很模糊,你不知道要删除什么.

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

另一个问题是,用户将始终使用他们的浏览器返回按钮,然后他们将转到您的自定义后退按钮.我有一种感觉,每250毫秒阅读历史的延迟也会引人注目.也许你可以让间隔更紧,但后来我不知道这是否会让事情表现得很糟糕.

我使用过yui的历史管理器,尽管它并不是在所有浏览器中都能完美运行(尤其是ie6),但它已被很多用户和开发人员使用.他们使用的模式也非常灵活.