众所周知,在XHR(又称为AJAX) Web应用程序中,没有为您的应用程序构建历史记录,并且经常点击刷新按钮会使用户退出当前活动状态。我偶然发现了location.hash(例如
这让我想到使用location.hash来跟踪我的应用程序历史记录。我不想使用现有的库,因为它们使用iframes等。因此,当应用程序页面加载时,我启动了以下操作:
http://anywhere/index.html#somehashvalue
),以避开刷新问题(使用location.hash告知您的应用程序其当前状态,并使用页面加载处理程序重置该状态)。这真的很好而且简单。这让我想到使用location.hash来跟踪我的应用程序历史记录。我不想使用现有的库,因为它们使用iframes等。因此,当应用程序页面加载时,我启动了以下操作:
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),这可能对您有用。我在我的网站上发布了它,随意使用/修改/批评。