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);
}
function
hashChangeFire(){ alert("URL产生了变化") } 

 

posted @ 2018-10-12 13:56  前端__小川  阅读(14502)  评论(0编辑  收藏  举报