之前看sparks345 写的《不采用interval方式模仿onHashChange

后来自己又折腾了一把,完整的源码总共大小是1.66KB(2K不到)

 

支持:FF3.0+、IE6+、Chrome

 

不使用定时器实现的onhashchange

 

主流的浏览器(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);

相关文章:

  • 2022-12-23
  • 2021-05-26
  • 2021-09-16
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-01-04
  • 2021-07-28
猜你喜欢
  • 2021-06-28
  • 2021-11-10
  • 2021-12-27
  • 2021-09-26
  • 2021-04-26
  • 2021-10-29
相关资源
相似解决方案