ajax地址记录历史记录（支持多浏览器）

Posted on 2012-06-14 15:35  逝水如年  阅读(717)  评论(0)    收藏  举报 
  1 (function ($) {
  2     extend = function(target, methods) {
  3         if (!target) target = {};
  4         for (var prop in methods) target[prop] = methods[prop];
  5         return target;
  6     };
  7     HashListen = function (options) {
  8         var _this_ = this;
  9         //如果options存在，就和默认的options合并
 10         if (options) {
 11             this.options = $.extend(this.options, options);
 12         }
 13 
 14         //处理opera浏览器
 15         if ($.browser.opera && window.history.navigationMode) {
 16             window.history.navigationMode = 'compatible';
 17         }
 18         //如果支持onhashchange，就调用hashchange事件
 19         if (
 20             ('onhashchange' in window) &&
 21                 (typeof(document.documentMode) == 'undefined' || document.documentMode > 7)
 22             ) {
 23             
 24             $(window).bind('hashchange', function () {
 25                 var hash = _this_.getHash();
 26                 if (hash == _this_.currentHash) {
 27                     return;
 28                 }
 29                 $(_this_).trigger('hashChanged', hash);
 30             });
 31         } else {
 32             //如果是不支持onhashchange事件的浏览器用iframe帮助浏览器记录历史
 33             if (this.useIframe) {
 34                 this.initializeHistoryIframe();
 35             }
 36         }
 37         
 38         $(window).bind('unload', function (event) {
 39             _this_.firstLoad = null;
 40         });
 41     
 42         if (this.options.start){
 43             this.start();
 44         }
 45     };
 46     
 47     extend(HashListen.prototype, {
 48         options:{
 49             blank_page:'blank.html',
 50             start:false
 51         },
 52         currentLocation:'',
 53         iframe:null,
 54         currentHash:'',
 55         firstLoad:true,
 56         handle:false,
 57         useIframe:($.browser.msie && (typeof(document.documentMode) == 'undefined' || document.documentMode < 8)),
 58         ignoreLocationChange:false,
 59         initializeHistoryIframe:function () {    //如果是低版本浏览器，就初始化一个隐藏的iframe，帮助浏览器记录历史
 60             var hash = this.getHash(), doc;
 61             var iframe = $('<iframe></iframe>').css({
 62                 'position':'absolute',
 63                 'top':0,
 64                 'left':0,
 65                 'width':'1px',
 66                 'height':'1px',
 67                 'visibility':'hidden'
 68             }).attr('src', this.options.blank_page);
 69             $('body').append(iframe);
 70             this.iframe = iframe[0];
 71             doc = (this.iframe.contentDocument) ? this.iframe.contentDocument : this.iframe.contentWindow.document;
 72             doc.open();
 73             doc.write('<html><body id="state">' + hash + '</body></html>');
 74             doc.close();
 75             return;
 76         },
 77         checkHash:function () {
 78             var hash = this.getHash(), ie_state, doc;
 79             if (this.ignoreLocationChange) {
 80                 this.ignoreLocationChange = false;
 81                 return;
 82             }
 83             if (this.useIframe) {
 84                 doc = (this.iframe.contentDocument) ? this.iframe.contentDocumnet : this.iframe.contentWindow.document;
 85                 ie_state = doc.body.innerHTML;
 86                 if (ie_state != hash) {
 87                     this.setHash(ie_state);
 88                     hash = ie_state;
 89                 }
 90             }
 91             
 92             if (this.currentLocation == hash) {
 93                 return;
 94             }
 95 
 96             this.currentLocation = hash;
 97             $(this).trigger('hashChanged', hash);
 98         },
 99         setHash:function (newHash) {
100             window.location.hash = this.currentLocation = newHash;
101             if (
102                 ('onhashchange' in window) &&
103                     (typeof(document.documentMode) == 'undefined' || document.documentMode > 7)
104                 ) return;
105             
106             $(this).trigger('hashChanged', newHash);
107         },
108         getHash:function () {
109             var m;
110             if ($.browser.mozilla) {
111                 m = /#(.*)$/.exec(window.location.href);
112                 return m && m[1] ? m[1] : '';
113             } else if ($.browser.safari || $.browser.webkit) {
114                 return decodeURI(window.location.hash.substr(1));
115             } else {
116                 return window.location.hash.substr(1);
117             }
118         },
119         setIframeHash:function (newHash) {
120             var doc = (this.iframe.contentDocument) ? this.iframe.contentDocumnet : this.iframe.contentWindow.document;
121             doc.open();
122             doc.write('<html><body id="state">' + newHash + '</body></html>');
123             doc.close();
124         },
125         updateHash:function (newHash) {
126             if (document.getElementById(newHash)) {
127                 alert('this newHash equal document.getElementById(newHash)!!!');
128                 return;
129             }
130             this.ignoreLocationChange = true;
131             if (this.useIframe) this.setIframeHash(newHash);
132             else this.setHash(newHash);
133         },
134         start:function () {
135             var $this = this;
136             this.handle = setInterval(function(){
137                 $this.checkHash();
138             }, 100);
139         },
140         stop:function () {
141             clearInterval(this.handle);
142         },
143         listen:function (fn) {
144             $(this).bind('hashChanged', fn);
145             if (this.useIframe) this.start();
146         }
147     });
148 })(jQuery);

使用的时候：必须加载jquery，因为是基于jquery开发的

例子：

这里可以使用ajax，我这里只是简单的改变地址栏的链接

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 2         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5 
 6     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 7 </head>
 8 <body>
 9 <div>
10 <div id="divs"></div>
11     <a href="javascript:aa();">aa</a>
12     <a href="javascript:bb();">bb</a>
13 </div>
14 <script src = 'jquery.js' type='text/javascript'></script>
15 <script src = 'hashlisten.js' type='text/javascript'></script>
16 <script>
17 var options = {blank_page:'blank.html' ,start:false};
18 var H = new HashListen(options);
19 H.listen(function(e,hash){
20     alert(hash);
21 });
22 function aa(){
23     H.updateHash('response1.php');
24 };
25 function bb(){
26     H.updateHash('response2.php');
27 };
28 </script>
29 </body>
30 </html>

博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3