项目中使用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产生了变化") }