監(jiān)控 url fragment變化的js代碼
更新時間：2010年04月19日 21:18:49 作者：
url 里面的 #后面的部分 可以實現(xiàn)無刷新的改變url 的值。這個特點非常有用。比如視頻網(wǎng)站土豆中的豆單，你進入視頻列表以后，點擊播放某個視頻。
當然，頁面最好不要刷新，但是，拷貝一下瀏覽器的鏈接，又希望是下次能定位到你播發(fā)的那個視頻。方法很簡單，改變一下 url 的 fragment 就可以了。
監(jiān)聽fragment 的變化是這類編程的核心。在主流的瀏覽器(IE firefox)里面 都有一個 onhashchange 的事件監(jiān)聽 fragment 的變化。
但是，他們的行為有些差異。在IE8 以前的 IE版本里面，當 window.location 對象迅速變化的情況下，onhashchange 不會觸發(fā)，非常奇怪的bug。
下面我寫的 onhashchange 事件 沒有瀏覽器的差異。并且加入了一個功能，頁面初始化的時候，如果 url 中 有 fragment ，也觸發(fā)一下
onhashchange 事件。
function addFragmentChangeEvent(callback)
{
var source = document.URL;
var url = source.split("#")[0];
if (window.location.hash)
{
var base_hash = "#____base____hash____";//改變hash，使得頁面初始化的時候觸發(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;
}
}
其實這個技巧是js 中間常用的技巧，模擬一個事件的作用。
監(jiān)聽fragment 的變化是這類編程的核心。在主流的瀏覽器(IE firefox)里面 都有一個 onhashchange 的事件監(jiān)聽 fragment 的變化。
但是，他們的行為有些差異。在IE8 以前的 IE版本里面，當 window.location 對象迅速變化的情況下，onhashchange 不會觸發(fā)，非常奇怪的bug。
下面我寫的 onhashchange 事件 沒有瀏覽器的差異。并且加入了一個功能，頁面初始化的時候，如果 url 中 有 fragment ，也觸發(fā)一下
onhashchange 事件。
復制代碼 代碼如下:
function addFragmentChangeEvent(callback)
{
var source = document.URL;
var url = source.split("#")[0];
if (window.location.hash)
{
var base_hash = "#____base____hash____";//改變hash，使得頁面初始化的時候觸發(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;
}
}
其實這個技巧是js 中間常用的技巧，模擬一個事件的作用。
您可能感興趣的文章:
- 關于angular js_$watch監(jiān)控屬性和對象詳解
- 使用javascript實現(xiàn)監(jiān)控視頻播放并打印日志
- JS監(jiān)控關閉瀏覽器操作的實例詳解
- JS實現(xiàn)監(jiān)控微信小程序的原理
- 使用Javascript監(jiān)控前端相關數(shù)據(jù)的代碼
- js實時監(jiān)控文本框輸入字數(shù)的實例代碼
- 使用Object.defineProperty實現(xiàn)簡單的js雙向綁定
- js中Object.defineProperty()方法的不詳解
- JavaScript的Object.defineProperty詳解
- JS使用對象的defineProperty進行變量監(jiān)控操作示例
相關文章
JavaScript暫停和繼續(xù)定時器的實現(xiàn)方法
這篇文章主要介紹了JavaScript暫停和繼續(xù)定時器的方法的相關資料,非常不錯，需要的朋友可以參考下2016-07-07
如何實現(xiàn)textarea里的不同文本顯示不同顏色
如何實現(xiàn)textarea里的不同文本顯示不同顏色呢？控制textarea的style設置Textarea以及把文本放到標記里都不會起作用，下面有個不錯的解決方法，感興趣的朋友可以了解下2014-01-01
JavaScript call apply使用 JavaScript對象的方法綁定到DOM事件后this指向問題
JavaScript對象與DOM對象進行綁定會遇到一個問題：如果被綁定的對象的方法中包含this關鍵字，當事件被觸發(fā)時this指向的卻是DOM對象，而不是之前的JS對象。2011-09-09
JavaScript數(shù)組對象實現(xiàn)增加一個返回隨機元素的方法
這篇文章主要介紹了JavaScript數(shù)組對象實現(xiàn)增加一個返回隨機元素的方法,涉及javascript針對數(shù)組及隨機數(shù)的相關操作技巧,需要的朋友可以參考下2015-07-07
行為驗證碼通過用戶的操作來完成驗證,常見的行為驗證碼有拖動式和點觸式,下面這篇文章主要給大家介紹了關于js前端實現(xiàn)登錄拼圖驗證功能的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
JavaScript中執(zhí)行上下文和執(zhí)行棧
這篇文章主要介紹了JavaScript中執(zhí)行上下文和執(zhí)行棧，執(zhí)行上下文是評估和執(zhí)行JavaScript代碼的環(huán)境的抽象概念，更多相關介紹，感興趣的朋友可以參考一下2022-09-09
這篇文章主要介紹了javascript動畫算法,實例分析了javascript實現(xiàn)動畫效果的實現(xiàn)及使用技巧,需要的朋友可以參考下2015-07-07
javascript結(jié)合CSS實現(xiàn)蘋果開關按鈕特效
這篇文章主要介紹了javascript結(jié)合CSS實現(xiàn)蘋果開關按鈕特效的方法以及全部代碼，效果非常不錯，兼容性也很好，有需要的小伙伴自己參考下2015-04-04
在Twitter上的一些有趣的討論中, 我發(fā)現(xiàn)人們對于Web應用和站點對javascript的依賴普遍存在一種疑惑. 這種疑惑一直都存在, 而對我而言, 這個問題隨著瀏覽技術的飛躍發(fā)展而集中爆發(fā)了2013-10-10
這篇文章主要介紹了有關JavaScript Promises異步問題詳解的相關資料,需要的朋友可以參考下2015-11-11