js 監聽URL的hash變化

2022-04-02 00:10:24 字數 860 閱讀 7934

專案中使用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))  else

}, 150);

}function

hashchangefire()

監聽url的變化

描述 在實際的專案中,我們經常會遇到修改history的問題,如 通過pushstate state,title,url 修改瀏覽器history歷史記錄,那我們有沒有好的方法可以監聽url的變化呢?示例 增加一條history歷史記錄 history.pushstate test myself w...

js監聽資料的變化。

原生js實現檢測物件變化。通過把屬性轉換為訪問器屬性,實現監聽。物件屬性的更改通過設定 get,set。陣列型別元素的更改通過在prototype過載運算元據的方法 slice push shift const op object.prototype const types const oam pu...

JS監聽DOM結構變化

在做乙個微博的接入,需要判斷微博是否被關注,要檢查微博標籤的div是否有 已關注 的字元,但這個div的內容是微博jssdk動態生成。id html 是獲取不到我想要的內容。原因是當我們獲取的時候內容還沒有改變,所以獲取不到,如果就想到監聽這個div內容變化後,再來獲取就個時候就能獲取到了。於是產生...