花生小将的日志

响应浏览器地址栏#(hash/fragment)变化

已有 1572 次阅读 2010-01-19 15:48 标签: 浏览器地址

Gmail 作为一个经典的 Web 2.0 应用，在带来革命性的邮件管理体验的同时，以其完整、快速的 AJAX 操作方式，深受用户的推崇和技术人员的追捧。

技术上，Gmail 通过将用户的操作以 #op1/op2 这样的形式（即 hash 或 fragment, 这里称之为 hash）反映在浏览器地址栏，最后得到一个类似这样的 URL: https://mail.google.com/mail/#inbox. 它还允许用户直接粘贴这样的地址到达相同的操作界面，并可以通过浏览器的前进/后退按钮在操作步骤之间跳转。

也想尝试一下？先分析一下，通过获取 hash 的值，执行一些操作，即可恢复到该值表示的场景——非常简单。但是，要处理浏览器前进/后退按钮，跳转到相应场景，则有一定困难。因为浏览器不会告诉你 hash 发生变化了。因此，需要实现一个 JavaScript 浏览器导航按钮处理模块。

网上有些代码实现了类似功能，大多感觉冗长复杂。这里，我们介绍支付宝实际应用中开发的一段代码，它的功能简单实用——允许用户指定 hash 发生变化时要做的事情（回调），也可以随时停止它。简单地说，这个代码的原理是，每隔一段时间检查 hash 有没有发生变化，如果有，就运行用户指定的回调方法。代码如下：
===============================================================

// 代码不支持 IE6
historyWatcher = function() {
var timer, last;
return {
register: function(fn, thisObj) {
if(typeof fn !== 'function') return;
timer = window.setInterval(function() {
if(location.hash !== last) {
last = location.hash;
fn.call(thisObj || window, last);
}
}, 100);
},
stop: function() {
timer && window.clearInterval(timer);
},
set: function(newHash) {
last = newHash;
location.hash = newHash;
}
};
}();
===============================================================

以上代码不支持IE6，我们将在解决IE6兼容问题后更新它。

因为它要比较 hash, 所以如果需要更新 hash, 则必须调用 hashWatcher.set() 方法，传入新的 hash。
hashWatcher.register() 方法接受两个参数：回调和上下文（可选），hash 发生变化后，新的 hash 会作为
唯一的参数传递给回调方法。

hashWatcher的使用方式通常有两部分：

注册回调方法：
hashWatcher.register(function(hash) {
// do something here...
});
必要的时候更新 hash:
hashWatcher.set('#op1/obj1');

通常，用于处理 hash 变化的回调 (handler) 只有一个。因此，在设计上，这里只是暴露了一个方法，而不是
用采用更复杂的自定义事件的方式。同理，hashWatcher 被设计成一个“静态类”──直接使用，无需实例化。
如果需要使用多个回调，可修改上面的代码，让 hashWatcher.register() 返回定时器实例 (timer), 在调用
hashWatcher.stop() 时传入这个 timer.

这段代码仅提供了处理 hash 变化（由应用设置或浏览器导航按键触发）的机制，进一步的恢复操作场景，与
具体业务有关，这里就不再讨论了。

分享举报