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

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

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

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

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

下面我寫的 onhashchange 事件沒有瀏覽器的差異。并且加入了一個(gè)功能，頁面初始化的時(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，使得頁面初始化的時(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暫停和繼續(xù)定時(shí)器的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript暫停和繼續(xù)定時(shí)器的方法的相關(guān)資料,非常不錯(cuò)，需要的朋友可以參考下
2016-07-07
如何實(shí)現(xiàn)textarea里的不同文本顯示不同顏色
如何實(shí)現(xiàn)textarea里的不同文本顯示不同顏色呢？控制textarea的style設(shè)置Textarea以及把文本放到標(biāo)記里都不會(huì)起作用，下面有個(gè)不錯(cuò)的解決方法，感興趣的朋友可以了解下
2014-01-01
JavaScript call apply使用 JavaScript對象的方法綁定到DOM事件后this指向問題
JavaScript對象與DOM對象進(jìn)行綁定會(huì)遇到一個(gè)問題：如果被綁定的對象的方法中包含this關(guān)鍵字，當(dāng)事件被觸發(fā)時(shí)this指向的卻是DOM對象，而不是之前的JS對象。
2011-09-09
JavaScript數(shù)組對象實(shí)現(xiàn)增加一個(gè)返回隨機(jī)元素的方法
這篇文章主要介紹了JavaScript數(shù)組對象實(shí)現(xiàn)增加一個(gè)返回隨機(jī)元素的方法,涉及javascript針對數(shù)組及隨機(jī)數(shù)的相關(guān)操作技巧,需要的朋友可以參考下
2015-07-07
js前端實(shí)現(xiàn)登錄拼圖驗(yàn)證功能
行為驗(yàn)證碼通過用戶的操作來完成驗(yàn)證,常見的行為驗(yàn)證碼有拖動(dòng)式和點(diǎn)觸式,下面這篇文章主要給大家介紹了關(guān)于js前端實(shí)現(xiàn)登錄拼圖驗(yàn)證功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02
JavaScript中執(zhí)行上下文和執(zhí)行棧
這篇文章主要介紹了JavaScript中執(zhí)行上下文和執(zhí)行棧，執(zhí)行上下文是評估和執(zhí)行JavaScript代碼的環(huán)境的抽象概念，更多相關(guān)介紹，感興趣的朋友可以參考一下
2022-09-09
javascript動(dòng)畫算法實(shí)例分析
這篇文章主要介紹了javascript動(dòng)畫算法,實(shí)例分析了javascript實(shí)現(xiàn)動(dòng)畫效果的實(shí)現(xiàn)及使用技巧,需要的朋友可以參考下
2015-07-07
javascript結(jié)合CSS實(shí)現(xiàn)蘋果開關(guān)按鈕特效
這篇文章主要介紹了javascript結(jié)合CSS實(shí)現(xiàn)蘋果開關(guān)按鈕特效的方法以及全部代碼，效果非常不錯(cuò)，兼容性也很好，有需要的小伙伴自己參考下
2015-04-04
javascript不可用的問題探究
在Twitter上的一些有趣的討論中, 我發(fā)現(xiàn)人們對于Web應(yīng)用和站點(diǎn)對javascript的依賴普遍存在一種疑惑. 這種疑惑一直都存在, 而對我而言, 這個(gè)問題隨著瀏覽技術(shù)的飛躍發(fā)展而集中爆發(fā)了
2013-10-10
有關(guān)Promises異步問題詳解
這篇文章主要介紹了有關(guān)JavaScript Promises異步問題詳解的相關(guān)資料,需要的朋友可以參考下
2015-11-11