hashchange 插件

最新推荐文章于 2023-11-11 14:19:29 发布

iteye_12132

最新推荐文章于 2023-11-11 14:19:29 发布

阅读量230

点赞数

分类专栏： JavaScript javascript-半成品文章标签： jquery JavaScript ViewUI

本文链接：https://blog.csdn.net/iteye_12132/article/details/82604078

版权

JavaScript 同时被 2 个专栏收录

117 篇文章 0 订阅

订阅专栏

javascript-半成品

11 篇文章 0 订阅

订阅专栏


(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>

iteye_12132

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
hashchange 插件

[code="js"](function($){ var hashchange = 'hashchange', DOC = document, documentMode = DOC.documentMode, supportHashChange = ('on' + hashchange in window) && ( documentMode === und...
复制链接

扫一扫

专栏目录