注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

江志祥的博客

可恶的中国银行,信用卡像病毒啊,取消那么难,,,

 
 
 

日志

 
 

ajax地址记录历史记录(支持多浏览器)  

2012-11-26 22:28:11|  分类: 计算机_ajax |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
(function ($) {
     extend = function(target, methods) {
         if (!target) target = {};
         for (var prop in methods) target[prop] = methods[prop];
         return target;
     };
     HashListen = function (options) {
         var _this_ = this;
         //如果options存在,就和默认的options合并
         if (options) {
             this.options = $.extend(this.options, options);
         }
 
         //处理opera浏览器
         if ($.browser.opera && window.history.navigationMode) {
             window.history.navigationMode = 'compatible';
         }
         //如果支持onhashchange,就调用hashchange事件
         if (
             ('onhashchange' in window) &&
                 (typeof(document.documentMode) == 'undefined' || document.documentMode > 7)
             ) {
            
             $(window).bind('hashchange', function () {
                 var hash = _this_.getHash();
                 if (hash == _this_.currentHash) {
                     return;
                 }
                 $(_this_).trigger('hashChanged', hash);
             });
         } else {
             //如果是不支持onhashchange事件的浏览器用iframe帮助浏览器记录历史
             if (this.useIframe) {
                 this.initializeHistoryIframe();
             }
         }
        
         $(window).bind('unload', function (event) {
             _this_.firstLoad = null;
         });
    
         if (this.options.start){
             this.start();
         }
     };
    
     extend(HashListen.prototype, {
         options:{
             blank_page:'blank.html',
             start:false
         },
         currentLocation:'',
         iframe:null,
         currentHash:'',
         firstLoad:true,
         handle:false,
         useIframe:($.browser.msie && (typeof(document.documentMode) == 'undefined' || document.documentMode < 8)),
         ignoreLocationChange:false,
         initializeHistoryIframe:function () {    //如果是低版本浏览器,就初始化一个隐藏的iframe,帮助浏览器记录历史
             var hash = this.getHash(), doc;
             var iframe = $('<iframe></iframe>').css({
                 'position':'absolute',
                 'top':0,
                 'left':0,
                 'width':'1px',
                 'height':'1px',
                 'visibility':'hidden'
             }).attr('src', this.options.blank_page);
             $('body').append(iframe);
             this.iframe = iframe[0];
             doc = (this.iframe.contentDocument) ? this.iframe.contentDocument : this.iframe.contentWindow.document;
             doc.open();
             doc.write('<html><body id="state">' + hash + '</body></html>');
             doc.close();
             return;
         },
         checkHash:function () {
             var hash = this.getHash(), ie_state, doc;
             if (this.ignoreLocationChange) {
                 this.ignoreLocationChange = false;
                 return;
             }
             if (this.useIframe) {
                 doc = (this.iframe.contentDocument) ? this.iframe.contentDocumnet : this.iframe.contentWindow.document;
                 ie_state = doc.body.innerHTML;
                 if (ie_state != hash) {
                     this.setHash(ie_state);
                     hash = ie_state;
                 }
             }
            
             if (this.currentLocation == hash) {
                 return;
             }
 
             this.currentLocation = hash;
             $(this).trigger('hashChanged', hash);
         },
         setHash:function (newHash) {
             window.location.hash = this.currentLocation = newHash;
             if (
                 ('onhashchange' in window) &&
                     (typeof(document.documentMode) == 'undefined' || document.documentMode > 7)
                 ) return;
            
             $(this).trigger('hashChanged', newHash);
         },
         getHash:function () {
             var m;
             if ($.browser.mozilla) {
                 m = /#(.*)$/.exec(window.location.href);
                 return m && m[1] ? m[1] : '';
             } else if ($.browser.safari || $.browser.webkit) {
                 return decodeURI(window.location.hash.substr(1));
             } else {
                 return window.location.hash.substr(1);
             }
         },
         setIframeHash:function (newHash) {
             var doc = (this.iframe.contentDocument) ? this.iframe.contentDocumnet : this.iframe.contentWindow.document;
             doc.open();
             doc.write('<html><body id="state">' + newHash + '</body></html>');
             doc.close();
         },
         updateHash:function (newHash) {
             if (document.getElementById(newHash)) {
                 alert('this newHash equal document.getElementById(newHash)!!!');
                 return;
             }
             this.ignoreLocationChange = true;
             if (this.useIframe) this.setIframeHash(newHash);
             else this.setHash(newHash);
         },
         start:function () {
             var $this = this;
             this.handle = setInterval(function(){
                 $this.checkHash();
             }, 100);
         },
         stop:function () {
             clearInterval(this.handle);
         },
         listen:function (fn) {
             $(this).bind('hashChanged', fn);
             if (this.useIframe) this.start();
         }
     });
 })(jQuery);

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

例子:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 <body>
 <div>
 <div id="divs"></div>
     <a href="javascript:aa();">aa</a>
     <a href="javascript:bb();">bb</a>
 </div>
 <script src='http://jiangzhixiang123.blog.163.com/blog/jquery.js' type='text/javascript'></script>
 <script src='http://jiangzhixiang123.blog.163.com/blog/hashlisten.js' type='text/javascript'></script>
 <script>
 var options = {blank_page:'blank.html' ,start:false};
 var H = new HashListen(options);
 H.listen(function(e,hash){
     alert(hash);
 });
 function aa(){
     H.updateHash('response1.php');
 };
 function bb(){
     H.updateHash('response2.php');
 };
 </script>
 </body>
 </html>

  评论这张
 
阅读(496)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017