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產生了變化") }