ADS-ajaxj详解（2）-检测hash变化解决ajax后退按钮和书签问题

// 后退按钮和书签功能
/*
通过一些DOM脚本并利用URL的hash值可以补救后退按钮和标签的问题。
其中，hash值表示浏览器应该保持在当前页面上，但同时必须通过重新定位页面使得与hash匹配的命名的锚（或带有相同ID属性的元素），在浏览器的视口(view port)中可见。如果文档中不存在与hash匹配的项，则浏览器只会改变地址栏中的URL。这里的hash可以连同URL一起被作为标签使用，而且通过一些DOM脚本及hack技术，hash还可以在用户单击后退按钮时用于更新页面。
*/
/**
* 1.不那么简单的修复
* 修复后退按钮和变迁涉及监视和识别URL中hash值的变化，并通过该变化来调用Ajax请求。要做到这一点，需要创建一个检测地址中hash值变化的对象，同时以预先定义的适当的方法进行响应。这个对象需要做以下几件事：
*      （1）是永不唐突的DOM脚本增强文档以跟踪页面的变化。
*      （2）允许注册根据不同hash值作为反映的不同方法。
*      （3）监事地址栏的变化并调用注册过的适当方法。
*      （4）在处理后退按钮和标签时，适应各种不同产品化浏览器的古怪行为。
* 每种浏览器处理地址的方式都有点不一样：
*      （1）在IE中，后退和前进按钮会忽略hash值，而只基于URL的其余部分进行导航。为了解决这个问题，需要使用一个隐藏的<iframe>并通过向GET字符串中添加hash来模拟导航到不同的网页。
*      （2）在Safari中，当通过带hash的URL向前或向后导航时，浏览器的history及history.length会相应改变。但是，window.location.href的值会保持为通过后退和前进按钮导航之前，浏览器中打开的最后一个地址。考虑到安全原因，我们无法访问history中的URL，因此需要相对于Safari的history的长度保持跟踪访问过的hash值，并且能够从存储列表中找回适当的hash。
*      （3）Firefox和Opera的行为则都更符合常理，他们会在使用后退和前进按钮通过hash来导航时，同步更新window对象的location值。
*
* 2.针对产品功能的浏览器嗅探
* 在处理具体浏览器的产品功能时，浏览器嗅探是一种可以接受的方案，而且也是唯一可能的方案，因为产品的差异并不针对Javascript中的能力或对象。
*
* 3.跟踪地质变化
*/

/* 一个用来基于hash触发注册的方法的URL hash侦听器 */
var actionPager = {
// 前一个hash
lastHash: '',
// 为hash模式注册的方法列表
callbacks: [],
// Safari历史记录列表
safariHistory: false,
// 对为IE准备的iframe的引用
msieHistory: false,
// 应该被转换的链接的类名
ajaxifyClassName: '',
// 应用程序的根目录。当创建hash时
// 它将是被清理后的URL
ajaxifyRoot: '',

/**
* 初始化页面(pager)功能
* @param {String} ajaxifyClass 预定义的类名，只有符合该类名的链接才具备功能，默认为 ADSActionLink
* @param {String} ajaxifyRoot 预定义的根路径
* @param {String} startingHash 预定义的hash值，默认为start
* @example actionPager.init();
*/
init: function (ajaxifyClass, ajaxifyRoot, startingHash) {

this.ajaxifyClassName = ajaxifyClass || 'ADSActionLink';
this.ajaxifyRoot = ajaxifyRoot || '';

var ua = navigator.userAgent;
if (/Safari/i.test(ua) && /Version\/3/.test(ua)) {
this.safariHistory = [];
} else if (/MSIE/i.test(ua) && (parseInt(ua.split('MSIE')[1]) < 8)) {
// 如果是MSIE 6/7，添加一个iframe以便
// 跟踪重写（override）后退按钮
this.msieHistory = document.createElement('iframe');
this.msieHistory.setAttribute('id', 'msieHistory');
this.msieHistory.setAttribute('name', 'msieHistory');
this.msieHistory.setAttribute('src', 'fakepage');
setStyleById(this.msieHistory, {
'width': '100px',
'height': '100px',
'border': '1px solid black',
'display': 'none',
'z-index': -1
});
document.body.appendChild(this.msieHistory);
this.msieHistory = frames.msieHistory;
}

// 将链接转换为Ajax链接
this.ajaxifyLinks();

// 取得当前的地址
var locat = this.getLocation();

// 检测地址中是否包含hash（来自书签）
// 或者是否已经提供了hash
if (!locat.hash && !startingHash) {
startingHash = 'start';
}

// 按照需要保存hash
var ajaxHash = this.getHashFromURL(locat.hash) || startingHash;
this.addBackButtonHash(ajaxHash);

// 添加监视事件以观察地址栏中的变化
var watcherCallback = makeCallback(this.watchLocationForChange, this);

if (/MSIE/i.test(ua) && (parseInt(ua.split('MSIE')[1]) < 8)) {
window.setInterval(watcherCallback, 200);
} else {
addEvent(window,'hashchange',watcherCallback);
}

},

/**
* 会自动将任何带标识的锚标签转换为页面（pager）可以识别的链接
*/
ajaxifyLinks: function () {
// 将链接转换为锚以便Ajax进行处理
var links = getElementsByClassName(this.ajaxifyClassName, document, 'a');
for (var i = 0, len = links.length; i < len; i++) {
var curLink = links[i];
if (hasClassName(curLink, 'ADSActionPagerModified')) {
continue;
}

// 将href属性转换为#value形式
curLink.setAttribute('href', this.convertURLToHash(curLink.getAttribute('href')));
addClassName(curLink, 'ADSActionPagerModified');

// 注册单击事件以便在必要时添加历史纪录
addEvent(curLink, 'click', function () {
if (this.href && this.href.indexOf('#') > -1) {
actionPager.addBackButtonHash(actionPager.getHashFromURL(this.href));
}
});
}
},

/**
* 记录后退行为
* @param {String} ajaxHash hash值
* @return {Boolean}
*/
addBackButtonHash: function (ajaxHash) {
// 保存hash
if (!ajaxHash) {
return false;
}
if (this.safariHistory) {
// 为Safari使用特殊数组
if (this.safariHistory.length === 0) {
this.safariHistory[window.history.length] = ajaxHash;
} else {
this.safariHistory[window.history.length + 1] = ajaxHash;
}
return true;
} else if (this.msieHistory) {
// 在MSIE中通过导航iframe
this.msieHistory.document.execCommand('Stop');
this.msieHistory.location.href = 'fakepage?hash=' +
ajaxHash +
'&title=' +
document.title;
return true;
} else {
// 通过改变地址的值
// 使用makeCallback包装函数
// 以便在超时方法内部使this
// 引用actionPager
var timeoutCallback = makeCallback(function () {
if (this.getHashFromURL(window.location.href + window.location.hash) !== ajaxHash) {
location.replace(location.href + '#' + ajaxHash);
}
}, this);
setTimeout(timeoutCallback, 200);
return true;
}
return false;
},

/**
* 间隔地检测hash的变化，还可执行注册的侦听器
*/
watchLocationForChange: function () {
var newHash;
// 取得新的hash值
if (this.safariHistory) {
// 在Safari中从历史记录数组中取得
if (this.safariHistory[history.length]) {
newHash = this.safariHistory[history.length];
}
} else if (this.msieHistory) {
// 在MSIE中从iframe的地址中取得
newHash = this.msieHistory.location.href.split('&')[0].split('=')[1];
} else if (location.hash !== '') {
// 对其他浏览器从window.location中取得
newHash = this.getHashFromURL(window.location.href);
}

// 如果新hash与最后一次的hash不相同，则更新页面
if (newHash && this.lastHash !== newHash) {
if (this.msieHistory && this.getHashFromURL(window.location.href) !== newHash) {
// 修复MSIE中的地址栏
// 以便能适当地加上标签（或加入收藏夹）
location.hash = newHash;
}

// 在发生异常的情况下使用try/catch
// 结构尝试执行任何注册的侦听器
try {
this.executeListeners(newHash);
// 在通过处理程序添加任何
// 新链接的情况下进行更新
this.ajaxifyLinks();
} catch (ex) {
// 这里将捕获到回调函数中的任何异常JS
alert(ex);
}

// 将其保存为最后一个hash
this.lastHash = newHash;
}
},

/**
* 用于根据特殊的hash来注册侦听器
* @param {RegExp || String} regex 正则表达式
* @param {Function} method 执行的方法
* @param {Object || Element} context 执行环境，上下文
*/
register: function (regex, method, context) {
var obj = {'regex': regex};
context = context || window;
// 一个已经指定的环境
obj.callback = function (matches) {
method.apply(context, matches);
};

// 将侦听器添加到回调函数数则中
this.callbacks.push(obj);
},

/**
* 把链接的URL地址转换为hash值
* @param {String} url
* @return {*}
*/
convertURLToHash: function (url) {
if (!url) {
// 没有url，因而返回一个'#'
return '#';
} else if (url.indexOf('#') > -1) {
// 存在hash，因而返回它
return url.split('#')[1];
} else {
// ie67会自动添加域名
// 如果URL中包含域名（MSIE）则去掉它
if (url.indexOf('://') > -1) {
var locatH = window.location.href;
locatH = locatH.substring(0, locatH.lastIndexOf('/'));
var s = '';
var len = Math.min(locatH.length, url.length);
for (var i = 0; i < len; i++) {
if (locatH.charAt(i) !== url.charAt(i)) {
break;
} else {
s += url.charAt(i);
}
}

var reg = new RegExp(s + '/');
url = url.replace(reg, '');
//url = url.match(/:\/\/[^\/]+(.*)/)[1];
}
// 按照init()约定去掉根目录
return '#' + url.substring(this.ajaxifyRoot.length);
}
},

/**
* 从指定的URL中提取出hash值
* @param url
* @return {*}
*/
getHashFromURL: function (url) {
if (!url || url.indexOf('#') === -1) {
return '';
}
return url.split('#')[1];
},

/**
* 获取当前URL地址
* @return {*}
*/
getLocation: function () {
// 检查hash
if (!window.location.hash) {
// 没有则生成一个
var url = {
domain: null,
hash: null
};
if (window.location.href.indexOf('#') > -1) {
var parts = window.location.href.split('#')[1];
url.domain = parts[0];
url.hash = parts[1];
} else {
url.domain = window.location;
}
return url;
}
return window.location;
},

/**
* 执行侦听器
* @param hash
*/
executeListeners: function (hash) {
var matches;
// 执行与hash匹配的任何侦听器
if (this.callbacks.length) {
for (var i in this.callbacks) {
if ((matches = hash.match(this.callbacks[i].regex))) {
this.callbacks[i].callback(matches);
}
}
}

}
};

window.ADS.actionPager = actionPager;