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

Feature Chrome Firefox IE Opera Safari
support 5.0 3.6 (1.9.2) 8.0 10.6 5.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，可能会取少一部分内容：

比如 http://www.cnblogs.com/rubylouvre#stream/xxxxx?lang=zh_c

ie6 => location.hash = #stream/xxxxx

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

firefox 会自作多情对hash进行decodeURIComponent

比如 http://www.cnblogs.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 = '<!doctype html><html><body>#{0}</body></html>'
         
        if( $.fn[ hashchange ].domain){
            html = html.replace("<body>","<script>document.domain ="+
                $.fn[ hashchange ].domain +"</script><body>" )
        }
 
        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 = $('<iframe tabindex="-1" style="display:none" widht=0 height=0 title="empty" />').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;
                }
            }
        };
    }
 
})

具体例子可见这里

打开后点击“运行代码”，然后点击页面触发hashchange，它的回调会在页面添加一行红字，然后再点击后退按钮就看到效果了。

onhashchange事件--司徒正美的更多相关文章

  1. [ javascript ] 司徒正美的fadeOut-fadeIn效果!

    首先感谢司徒正美的文章! 在司徒大神的博客看到一个简单的渐入渐出的效果.全然採用js实现. 例如以下: <!doctype html> <html dir="ltr&quo ...

  2. [web前端] 去哪儿网前端架构师司徒正美：如何挑选适合的前端框架？

    原文地址: https://www.jianshu.com/p/6327d4280e3b 最近几年,前端技术迅猛发展,差不多每年都会冒出一款主流的框架. 每次新开业务线或启动新项目时,首先第一件事就是 ...

  3. javascript 45种缓动效果BY司徒正美

    javascript 45种缓动效果 参数 类型 说明 el element 必需,为页面元素 begin number 必需,开始的位置 change number 必需,要移动的距离 durati ...

  4. html标签对应的英文原文 - 司徒正美

    标签 对应英文 说明 <!--> / 注释 <!DOCTYPE> document type 文档类型 <a> anchor 超链接 <abbr> ab ...

  5. onhashchange事件，只需要修改hash值即可响应onhashchange事件中的函数（适用于上一题下一题和跳转页面等功能）

    使用实例: 使用onhashchange事件做一个简单的上一页下一页功能,并且当刷新页面时停留在当前页 html: <!DOCTYPE html><html><body& ...

  6. 深入理解JavaScript的闭包特性如何给循环中的对象添加事件

    初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...

  7. JS 事件代理

    事件处理器:onclick.onmouseover.... 在传统的事件处理中,你需要为每一个元素添加或者是删除事件处理器.然而,事件处理器将有可能导致内存泄露或者是性能下降——你用得越多这种风险就越 ...

  8. javascript事件代理(Event Delegation)

    看了几篇文章,放上来供参考 司徒正美的文章,Event Delegation Made Easy --------------------------------------------------- ...

  9. 了解javascript中的事件（二）

    本文目录如下: 零.寒暄 一.事件的分类 二.事件代理 2.1 问题引出 2.2 什么是事件代理 2.3 完整示例 二.事件代理 三.事件代理思想的用处 四.总结 零.寒暄 这篇博客本该出现在两个月以 ...

随机推荐

  1. Linux下对字符串进行MD5加密

    Linux下对字符串进行MD5加密 比如要用MD5在linux下加密字符串“test",可以使用命令:$ echo -n test|md5sum098f6bcd4621d373cade4e8 ...

  2. 如何用ATL创建ActiveX控件

    演示截图: 代码简介或代码解析: 如何用ATL创建ActiveX控件 实现了一个ActiveX控件,它在一个圆内部有个正多边形,当用户在多变形内部单击将会使多边形的边数在当前的基础上+1,在多变形外部 ...

  3. Guava缓存器源码分析——删除消息

    Guava缓存器的删除消息机制 测试代码——             LoadingCache<String, Integer> cache = CacheBuilder.newBuild ...

  4. Python 操作 MySQL--（pymysql）

    h2 { color: #fff; background-color: #7CCD7C; padding: 3px; margin: 10px 0px } h3 { color: #fff; back ...

  5. 系统学习Linux的11点建议

    一.从基础开始 常常有些朋友在 Linux 论坛问一些问题,不过,其中大多数的问题都是很基础的.例如为什么我使用一个命令的时候,系统告诉我找不到该目录,我要如何限制使用者的权限等问题,这些问题其实都不 ...

  6. JavaScript 中的面向对象的初步认识

    我在学习JS的面向对象编程的时候,总是有两个奇怪的问题. 第一个就是:面向对象在JS中很少用到... 可能是目前自己做的项目还是比较简单,前端方面的任务我几乎都是用面向过程的方式写的,所以就导致,我啃 ...

  7. asp.net 超链接 下载TEXT文件，而不是直接在IE中打开

    问题描述:后台生成了文本文件,用超链接提供给用户下载.点击超链接,下载Excel文件没问题,但文本文件会直接被打开,而不是弹出下载窗口. 解决方法:把HyperLink改为LinkButton,在Cl ...

  8. 关于sizeof（）和内存对齐

    PS补充:枚举类型的字节数为什么为4 百度知道回答: typedef enum e1{ MON, TUE, THI, }e; e1是一个数值,它的允许值范围是: MON,TUE,THI, 它的取值为其 ...

  9. QF——iOS的单例模式

    iOS的单例模式: 单例,即为单个实例,确保一个类里只有一个实例,向整个系统提供一个唯一的实例. 甚至为了严格提供唯一的实例,通常只允许该类自己提供实例化的方法,不允许出现其他入口.这时我们通常得重写 ...

  10. Android 树形菜单

    首先来一张萌萌哒的效果图(比较懒 - -) 然后是代码: // Node package com.example.treeview.utils; import java.util.ArrayList; ...