js 监听URL的hash变化

项目中使用AntdUI组件+react  里面使用了menu组件管理目录结构，不同目录组件页面之中有点击按钮进行不同目录的跳转，因为是各种组件的关系，点击各组件后准确跳转到目标页面没有问题，但是左侧目录结构不能进行有效的收缩和展开的动作，故使用js来监听URL的hash变化的方式进行接下来的逻辑行为

原理：监视hash的变化 onhashchange事件

兼容：

　　　Gecko 1.9.2 (Firefox 3.6/Thunderbird 3.1/Fennec 1.0)

　　　IE 8

　　　WebKit 528+ (Safari/Google Chrome)

　　　Opera 10.70

备用方法：定时器（频繁的定时器，隐患很大）

秉承不应基于浏览器检测，而应基于对象和方法检测的 原则，可用 if(‘onhashchange’ in window) { } 检测浏览器是否支持onhashchange。这里不能用 typeof window.onhashchange === ‘undefined’ 来检测，因为很多支持onhashchange的浏览器下，其初始值就是undefined。

需要注意的是，在IE8以ie7的模式运行时，window下存在onhashchange这个方法，但是永远不会触发这个事件，因此需要先检测IE的document.documentMode。

综上所述，采取比较完善方式的代码片段：

if( ("onhashchange" in window) && ((typeof document.documentMode==="undefined") || document.documentMode==8)) {
    // 浏览器支持onhashchange事件
    window.onhashchange = hashChangeFire;  // TODO，对应新的hash执行的操作函数
} else {
    // 不支持则用定时器检测的办法
    setInterval(function() {
        var ischanged = isHashChanged();  // TODO，检测hash值或其中某一段是否更改的函数
        if(ischanged) {
            hashChangeFire();  // TODO，对应新的hash执行的操作函数
        }
    }, 150);
}
functionhashChangeFire(){ alert("URL产生了变化") } 

 

转载于:https://www.cnblogs.com/web-chuan/p/9777740.html