Skip to content

Instantly share code, notes, and snippets.

@wanghuaisheng
Last active March 29, 2018 05:28
Show Gist options
  • Save wanghuaisheng/acf195c7dfd654941a4906de9c903402 to your computer and use it in GitHub Desktop.
Save wanghuaisheng/acf195c7dfd654941a4906de9c903402 to your computer and use it in GitHub Desktop.
hashchange

hashchange

在URL的参数列表(及URL中"#"号后面的所有字符串)发生变化的时候触发, hash的变化不会触发浏览器请求资源,因此天然可以来处理页面内无刷新导航 。

兼容如下:

IE8+ | FF3.6+ | Safari5+ | Chrome | Opera 10.6+ 支持hashchange

event对象有两个属性:oldURL和newURL, FF3.6+ Chrome Opera支持 oldURL 和 newURL

在IE6、7下可以采用定时循环检测或者采用添加隐藏iframe的方式来解决, 如:

if( ('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
    // 浏览器支持onhashchange事件
    window.onhashchange = hashChangeFire;  // TODO,对应新的hash执行的操作函数
} else {
    // 不支持则用定时器检测的办法
    setInterval(function() {
        // 检测hash值或其中某一段是否更改的函数, 在低版本的iE浏览器中通过window.location.hash取出的指和其它的浏览器不同,要注意
     var ischanged = isHashChanged(); 
        if(ischanged) {
            hashChangeFire();  // TODO,对应新的hash执行的操作函数
        }
    }, 150);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment