hashchange 插件

mutongwu

浏览: 448441 次
性别:
来自: 广州

最近访客更多访客>>

lxswfc

xjg9083

oszerone

micai_1234

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript-半成品
JavaScript

jquery JavaScript

(function($){

    var hashchange = 'hashchange',  DOC = document,  documentMode = DOC.documentMode,
    supportHashChange = ('on' + hashchange in window) && ( documentMode === undefined || documentMode > 7 );
   
    $.fn[ hashchange ] = function(callback){
        return callback?  this.bind(hashchange, callback ) : this.trigger( hashchange);
    };
    $.fn[ hashchange ].delay = 50;
    if(!supportHashChange){
        //$.log("不支持hashchange，使用iframe加定时器模拟")
        var iframe, timeoutID, html = '<!doctype html><html><body>{0}</body></html>';
        
        if( $.fn[ hashchange ].domain){
            html = html.replace("<body>","<script>document.domain ="+ 
                $.fn[ hashchange ].domain +"</script><body>" )
        }

        function format(html,hash){
            return html.replace('{0}', hash);
        }
        function getHash ( url) {//用于取得当前窗口或iframe窗口的hash值
            url = url || DOC.URL;
            return '#' + url.replace( /^[^#]*#?(.*)$/, '$1' );
        }
        function getHistory(){
            return getHash(iframe.location);
        }
        function setHistory(hash, history_hash){
            var doc = iframe.document;
            if (  hash !== history_hash ) {//只有当新hash不等于iframe中的hash才重写
                //用于产生历史
                    doc.open();
                    doc.write(format(html, hash));
                    doc.close();
            }
        }
        var last_hash = getHash(), history_hash, hash = "";

        $.event.special[ hashchange ] = {
            setup: function() {
                $(function(){
                    if (!iframe) {
                        var el = $('<iframe tabindex="-1" style="display:none" width="0" height="0" />').appendTo( document.body );
                        el.one("load",function(){
                            iframe = this.contentWindow;
                            var doc = iframe.document;
                            doc.open();
                            doc.write(format(html, last_hash));
                            doc.close();
                            timeoutID = setInterval(poll,  $.fn[ hashchange ].delay);
                        });

                        function poll() {
                            var hash = getHash(),//取得主窗口中的hash
                            	history_hash = iframe.document.body.innerText;//取得现在iframe中的hash
                            if(hash !== last_hash){//如果是主窗口的hash发生变化
                                setHistory(last_hash = hash, history_hash );
                                $(window).trigger(hashchange,[hash] );
                            }else if(history_hash !== last_hash){//如果按下回退键，
                                location.href = location.href.replace( /#.*/, '' ) +  history_hash;
                            }
                        }
                    }
                });
                
            },
            teardown: function(){
                if(!iframe){
                    clearTimeout(timeoutID);
                    $(iframe).remove();
                    iframe = null;
                }
            }
        };
    }
})(jQuery);

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="hashchange.js"></script>

</head>
<body>
	<a href="#a?id=10">aaaa</a>
	<a href="#b?id=11&bb=11">bbbb</a>
	<a href="#c?id=12&cc=11">cccc</a>
	<div id="log" width="300px;" height="200px" style="border:1px solid #ccc;"></div>
	<script>
		$(function(){
			$(window).hashchange(function(e,hash){
				$('#log').append('<div>' + document.location + '【<strong>'+hash+ '</strong>】</div>');
			});
			$(window).hashchange();
		});
	</script>
</body>
</html>

分享到：

js图表库比较 | ETAG Cache Expires

2014-09-04 11:50
浏览 1324
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

hashchange 插件

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

hashchange 插件

评论

发表评论

相关推荐

webpack简单打包PC网站前端资源

grunt构建基于seajs的网站实现

js平滑滚动回到顶部

fis-amd 的使用与修改

scrollMagic 视差与滚动动画GSAP

skrollr-视差滚动动画插件

stellar插件的使用

icon font VS svg font

gulp下静态资源的合并、压缩、MD5后缀

DOMContentLoaded VS onload VS onreadystatechange

简单的css3全屏滚动

jquery插件treetable 的使用

sublime 侧边栏字体大小修改

移动端的“点透”问题

scheme缺少,ie的bug

大整数相加

getBoundingClientRect 跨浏览器实现

window.name 跨域

window.name 跨域

HTML History API

最近访客更多访客>>