js實(shí)現(xiàn)無刷新監(jiān)聽URL的變化示例代碼詳解
無刷新改變路由的兩種方法通過hash改變路由
代碼
window.location.hash='edit'
效果
通過history改變路由
- history.back(): 返回瀏覽器會(huì)話歷史中的上一頁，跟瀏覽器的回退按鈕功能相同
- history.forward():指向?yàn)g覽器會(huì)話歷史中的下一頁，跟瀏覽器的前進(jìn)按鈕相同
- history.go(): 可以跳轉(zhuǎn)到瀏覽器會(huì)話歷史中的指定的某一個(gè)記錄頁
- history.pushState()可以將給定的數(shù)據(jù)壓入到瀏覽器會(huì)話歷史棧中，該方法接收3個(gè)參數(shù)，對(duì)象，title和一串url。pushState后會(huì)改變當(dāng)前頁面url
- history.replaceState()將當(dāng)前的會(huì)話頁面的url替換成指定的數(shù)據(jù)，replaceState后也會(huì)改變當(dāng)前頁面的url
監(jiān)聽url變化
監(jiān)聽hash變化
window.onhashchange=function(event){
console.log(event);
}
//或者
window.addEventListener('hashchange',function(event){
console.log(event);
})
監(jiān)聽back/forward/go
如果是history.back(),history.forward()、history.go()那么會(huì)觸發(fā)popstate事件
window.addEventListener('popstate', function(event) {
console.log(event);
})
但是，history.pushState()和history.replaceState()不會(huì)觸發(fā)popstate事件，所以需要自己手動(dòng)增加事件
監(jiān)聽pushState/replaceState
history.replaceState和pushState不會(huì)觸發(fā)popstate事件，那么如何監(jiān)聽這兩個(gè)行為呢。可以通過在方法里面主動(dòng)的去觸發(fā)popstate事件。另一種就是在方法中創(chuàng)建一個(gè)新的全局事件。
改造
const _historyWrap = function(type) {
const orig = history[type];
const e = new Event(type);
return function() {
const rv = orig.apply(this, arguments);
e.arguments = arguments;
window.dispatchEvent(e);
return rv;
};
};
history.pushState = _historyWrap('pushState');
history.replaceState = _historyWrap('replaceState');
監(jiān)聽
window.addEventListener('pushState', function(e) {
console.log('change pushState');
});
window.addEventListener('replaceState', function(e) {
console.log('change replaceState');
});
總結(jié)
到此這篇關(guān)于js如何無刷新監(jiān)聽URL的變化的文章就介紹到這了,更多相關(guān)js 無刷新監(jiān)聽url變化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- JS如何監(jiān)聽div的resize事件詳解
- JavaScript 監(jiān)聽組合按鍵思路及代碼實(shí)現(xiàn)
- JavaScript如何實(shí)現(xiàn)監(jiān)聽鍵盤輸入和鼠標(biāo)監(jiān)點(diǎn)擊
- NodeJS多種創(chuàng)建WebSocket監(jiān)聽的方式(三種)
- JavaScript監(jiān)聽鍵盤事件代碼實(shí)現(xiàn)
- 使用JS監(jiān)聽鍵盤按下事件（keydown event）
- js 實(shí)現(xiàn)watch監(jiān)聽數(shù)據(jù)變化的代碼
- javascript事件監(jiān)聽與事件委托實(shí)例詳解
- 如何用JS實(shí)現(xiàn)簡單的數(shù)據(jù)監(jiān)聽
相關(guān)文章
JavaScript實(shí)現(xiàn)動(dòng)態(tài)表格效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)表格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
.net,js捕捉文本框回車鍵事件的小例子(兼容多瀏覽器)，需要的朋友可以參考一下2013-03-03
JS基于遞歸算法實(shí)現(xiàn)1,2,3,4,5,6,7,8,9倒序放入數(shù)組中的方法
這篇文章主要介紹了JS基于遞歸算法實(shí)現(xiàn)1,2,3,4,5,6,7,8,9倒序放入數(shù)組中的方法,涉及JS遞歸算法操作數(shù)組實(shí)現(xiàn)排序功能的相關(guān)技巧,需要的朋友可以參考下2017-01-01
在現(xiàn)代Web開發(fā)中，JavaScript已經(jīng)成為無法替代的核心技術(shù)，在現(xiàn)代Web開發(fā)中，JavaScript已經(jīng)成為無法替代的核心技術(shù)，本文將通過代碼示例詳細(xì)介紹一些實(shí)踐解決方案，感興趣的同學(xué)可以參考下2023-06-06
electron中preload.js文件的用法小結(jié)
preload.js文件在Electron應(yīng)用中起著橋梁的作用,使得在保持安全的同時(shí),渲染進(jìn)程可以訪問主進(jìn)程的功能,保持渲染進(jìn)程與主進(jìn)程隔離的同時(shí),又能使渲染進(jìn)程具有訪問特定Electron API的能力的方法,本文給大家分享electron中preload.js文件的用法,感興趣的朋友一起看看吧2024-04-04
在SSM框架下用laypage和ajax實(shí)現(xiàn)分頁和數(shù)據(jù)交互的方法
今天小編大家分享一篇在SSM框架下用laypage和ajax實(shí)現(xiàn)分頁和數(shù)據(jù)交互的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
閉包機(jī)制是JavaScript的重點(diǎn)和難點(diǎn)，本文希望能幫助大家輕松的學(xué)習(xí)閉包。下面跟著小編一起來看下吧2017-03-03
內(nèi)存泄露是指一塊被分配的內(nèi)存既不能使用，又不能回收，直到瀏覽器進(jìn)程結(jié)束，由于瀏覽器垃圾回收方法有bug，會(huì)產(chǎn)生內(nèi)存泄露，下面與大家詳細(xì)探討下內(nèi)存泄露的幾種情況2013-05-05
這篇文章給大家羅列了在前段排序中會(huì)遇到的問題并寫了解決方案，非常詳細(xì)，有需要的朋友可以參考。2016-07-07
這篇文章主要介紹了js實(shí)現(xiàn)微信分享朋友鏈接顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-12-12