js實(shí)現(xiàn)無刷新監(jiān)聽URL的變化示例代碼詳解
無刷新改變路由的兩種方法通過hash改變路由
代碼
window.location.hash=’edit’
效果
http://xxxx/#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)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. IntelliJ IDEA安裝插件的方法步驟2. php模擬實(shí)現(xiàn)斗地主發(fā)牌3. 理解PHP5中static和const關(guān)鍵字4. MyBatis中的JdbcType映射使用詳解5. vue 使用localstorage實(shí)現(xiàn)面包屑的操作6. Vuex localStorage的具體使用7. Python random庫使用方法及異常處理方案8. spring acegi security 1.0.0 發(fā)布9. .Net Core使用Coravel實(shí)現(xiàn)任務(wù)調(diào)度的完整步驟10. Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)

網(wǎng)公網(wǎng)安備