之前看sparks345 写的《不采用interval方式模仿onHashChange》
后来自己又折腾了一把,完整的源码总共大小是1.66KB(2K不到)
支持:FF3.0+、IE6+、Chrome
主流的浏览器(IE6、IE7除外),基本上都支持onhashchange事件,而IE8也将支持。只有IE6、IE7不支持,而使用这两个浏览器的用户还是占有很大的一部分份额。
网上流传的实现onhashchange方法基本上都采用setInterval来跑,这样做:
第一:不切换也要去检测一次hash,总觉得别扭;
第二:点击过快的时候容易出bug(曾经耿耿于怀这个)
既然外面的轮子都不好用,还就自己造一个吧~
其实造也不难,因需要专门针对ie做一些处理就好了。页面放个iframe,然后然后iframe里面的内容,比如加个表单元素input并监听其onload事件,然后回调。
说明一下:这个方法不是我最先想到的,是我不经意见研究某站点的代码发现的,在这里先致谢一下。
HistoryManager.js的源码:
function HistoryManager() {
null;
null;
4: this._initialize();
5: }
6:
function() {
false,
false,
10: $pointer = this;
11:
function(url) {
if (!url) {
return ;
15: }
16:
var frameDoc = $pointer.adapterIframe.contentWindow.document;
18:
19: frameDoc.open();
20: frameDoc.write([
,
,
,
,
,
,
,
,
,
,
,
));
34: frameDoc.title = document.title;
35: frameDoc.close();
36: }
37:
function(url) {
40:
if (window.onhashchange) {
42: window.onhashchange();
43: }
44: }
45:
function(url) {
true;
48:
if (isIE && isIE < 8) {
50: $pointer.makeIEHistory(url);
else {
+ url;
53: }
54: }
55:
function(url) {
if (!url) {
58: url = document.location.hash.slice(1);
59: }
60:
61: $pointer.listener(url);
62: }
63:
function(fn) {
function() {};
66: }
67:
function() {
if (isIE && isIE < 8) {
);
71: $pointer.makeIEHistory();
72: }
73:
function() {
if (flag) {
false;
return ;
78: }
79:
80: $pointer.fire();
81: }
82: }
83:
84: }).call(HistoryManager.prototype);