快捷導(dǎo)航

監(jiān)控 url fragment變化的js代碼

更新時(shí)間：2010年04月19日 21:18:49 作者：

url 里面的 #后面的部分可以實(shí)現(xiàn)無(wú)刷新的改變url 的值。這個(gè)特點(diǎn)非常有用。比如視頻網(wǎng)站土豆中的豆單，你進(jìn)入視頻列表以后，點(diǎn)擊播放某個(gè)視頻。

當(dāng)然，頁(yè)面最好不要刷新，但是，拷貝一下瀏覽器的鏈接，又希望是下次能定位到你播發(fā)的那個(gè)視頻。方法很簡(jiǎn)單，改變一下 url 的 fragment 就可以了。

監(jiān)聽(tīng)fragment 的變化是這類編程的核心。在主流的瀏覽器(IE firefox)里面都有一個(gè) onhashchange 的事件監(jiān)聽(tīng) fragment 的變化。
但是，他們的行為有些差異。在IE8 以前的 IE版本里面，當(dāng) window.location 對(duì)象迅速變化的情況下，onhashchange 不會(huì)觸發(fā)，非常奇怪的bug。

下面我寫(xiě)的 onhashchange 事件沒(méi)有瀏覽器的差異。并且加入了一個(gè)功能，頁(yè)面初始化的時(shí)候，如果 url 中有 fragment ，也觸發(fā)一下
onhashchange 事件。

復(fù)制代碼代碼如下:

 
function addFragmentChangeEvent(callback) 
{ 
var source = document.URL; 
var url = source.split("#")[0]; 
if (window.location.hash) 
{ 
var base_hash = "#____base____hash____";//改變hash，使得頁(yè)面初始化的時(shí)候觸發(fā)一下事件函數(shù)。 
window.location = url + base_hash; 
} 
var prevHash = window.location.hash; 
window.setInterval( 
function() 
{ 
if (window.location.hash != prevHash) 
{ 
prevHash = window.location.hash; 
callback(prevHash); 
} 
}, 100); 
if (window.location.hash) 
{ 
window.location = source; 
} 
} 

其實(shí)這個(gè)技巧是js 中間常用的技巧，模擬一個(gè)事件的作用。

您可能感興趣的文章:

相關(guān)文章

詳解JavaScript常量定義
本文主要對(duì)JavaScript常量定義進(jìn)行詳細(xì)介紹，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
js實(shí)現(xiàn)把時(shí)間戳轉(zhuǎn)換為yyyy-MM-dd hh:mm 格式(es6語(yǔ)法)
下面小編就為大家分享一篇js實(shí)現(xiàn)把時(shí)間戳轉(zhuǎn)換為yyyy-MM-dd hh:mm 格式(es6語(yǔ)法)，具有很的參考價(jià)值，希望對(duì)大家有所幫助
2017-12-12
Js實(shí)現(xiàn)自定義右鍵行為
本文主要給大家分享的是一則javascript實(shí)現(xiàn)的自定義右鍵行為的小技巧，非常的簡(jiǎn)單實(shí)用，有相同需求的小伙伴可以參考下。
2015-03-03
Layui表格行工具事件與數(shù)據(jù)回填方法
今天小編就為大家分享一篇Layui表格行工具事件與數(shù)據(jù)回填方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
javascript實(shí)現(xiàn)的圖片預(yù)覽功能
這篇文章主要介紹了javascript實(shí)現(xiàn)的圖片預(yù)覽功能,結(jié)合實(shí)例形式分析了javascript針對(duì)圖片預(yù)覽相關(guān)功能實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下
2017-03-03
腳本合并提升javascript性能示例
腳本合并可以有效提升javascript性能，下面有個(gè)不錯(cuò)的示例，大家可以參考下
2014-02-02
在weex中愉快的使用scss的方法步驟
這篇文章主要介紹了在weex中愉快的使用scss的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
layui使用button按鈕點(diǎn)擊出現(xiàn)彈層彈層中加載表單的實(shí)例
今天小編就為大家分享一篇layui使用button按鈕點(diǎn)擊出現(xiàn)彈層彈層中加載表單的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
JavaScript實(shí)現(xiàn)淘寶網(wǎng)圖片的局部放大功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)淘寶網(wǎng)圖片的局部放大功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【九】實(shí)現(xiàn)Web頁(yè)面內(nèi)容的打印預(yù)覽和保存操作
本篇文章主要介紹如何實(shí)現(xiàn)Web頁(yè)面內(nèi)容的打印預(yù)覽和保存操作的相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧
2016-05-05