网站地图    收藏   

主页 > 前端 > javascript >

onhashchange事件和它的兼容处理

来源:未知    时间:2020-03-13 11:47 作者:小飞侠 阅读:

[导读] onhashchange事件和它的兼容处理,onhashchange事件是针对AJAX无缝刷新导致后退键失效而产生的事件,因此属于一个够新的事件,浏览器兼容性如下: Feature Chrome Firefox IE Opera Safari support 5....

onhashchange事件和它的兼容处理,onhashchange事件是针对AJAX无缝刷新导致后退键失效而产生的事件,因此属于一个够新的事件,浏览器兼容性如下:

FeatureChromeFirefoxIEOperaSafari
support5.03.6 (1.9.2)8.010.65.0

由于chrome引发的版本号竞赛,现在chrome20+,firefox16+,opera12了,因此对于标准浏览器我们不必顾虑支持问题,精力集中在IE678上。IE8在兼容模式下虽然有此事件,但不生效。这个检测也很简单。至于如何产生历史,这也很简单,直接在隐藏iframe中调用document.write方法就行。hash的变化,是通过定时器检测,不十分及时,但对于坚持IE67的操蛋用户就不应该给好脸色他们看!

如何观察hash的变化呢?这其实有三个hash值,一个是主窗口之前的hash值(last_hash),主窗口当前的hash值,一个是iframe中的hash值(history_hash),我们可以比较前两者得知hashchange,但当用户点击后退按钮后,AJAX引发的效果是作用于iframe中的,因此这时是比较last_hash与history_hash。发生变化后,我们再手动修改主窗口的hash,触发onhashchange回调。

最后提一提hash值的提取,这里存在两个兼容性问题:

  • IE6直接用location.hash取hash,可能会取少一部分内容:

  • 比如 https://www.zixuephp.com/rubylouvre#stream/xxxxx?lang=zh_c

  • ie6 => location.hash = #stream/xxxxx

  • 其他浏览器 => location.hash = #stream/xxxxx?lang=zh_c

  • firefox 会自作多情对hash进行decodeURIComponent

  • 比如 https://www.zixuephp.com/rubylouvre/#!/home/q={%22thedate%22:%2220121010~20121010%22}

  • firefox 15 => #!/home/q={"thedate":"20121010~20121010"}

  • 其他浏览器 => #!/home/q={%22thedate%22:%2220121010~20121010%22}

下面是mass Framework中的实现

define("hashchange", ["$event"], function(){
    $.log("已加载hashchange模块 by 司徒正美")
 
    var hashchange = 'hashchange',  DOC = document,  documentMode = DOC.documentMode,
    supportHashChange = ('on' + hashchange in window) && ( documentMode === void 0 || documentMode > 7 );
    
    $.fn[ hashchange ] = function(callback){
        return callback?  this.bind(hashchange, callback ) : this.fire( hashchange);
    }
    $.fn[ hashchange ].delay = 50;
    if(!supportHashChange){
        $.log("不支持hashchange,使用iframe加定时器模拟")
        var iframe, timeoutID, html = '#{0}'
         
        if( $.fn[ hashchange ].domain){
            html = html.replace("","" )
        }
 
        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 = "#";
        $.eventAdapter[ hashchange ] = {
            setup: function(desc) {
                $.require("ready", function(){
                    if (!iframe) {
                        //创建一个隐藏的iframe,使用这博文提供的技术 http://www.paciellogroup.com/blog/?p=604.
                        //iframe是直接加载父页面,为了防止死循环,在DOM树未建完之前就擦入新的内容 
                        var el = $('').appendTo( document.body )[0], fn
                        iframe = el.contentWindow
                        $.bind(el, "load",fn = function(){
                            $.unbind(el, "load", fn)
                            var doc = iframe.document
                            doc.open();
                            doc.write($.format(html, 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 )
                                $(desc.currentTarget).fire(hashchange)
                            }else if(history_hash !== last_hash){//如果按下回退键,
                                location.href = location.href.replace( /#.*/, '' ) + history_hash;
                            }
                        }
                    }
                    
                });
            },
            teardown: function(){
                if(!iframe){
                    clearTimeout(timeoutID);
                    $(iframe).remove();
                    iframe = 0;
                }
            }
        };
    }
 
})

以上就是onhashchange事件和它的兼容处理全部教程,感谢大家支持自学php网。

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论