js實(shí)現(xiàn)無(wú)刷新監(jiān)聽URL的變化示例代碼詳解
無(wú)刷新改變路由的兩種方法通過hash改變路由
代碼
window.location.hash=’edit’
效果
http://xxxx/#edit
通過history改變路由
history.back(): 返回瀏覽器會(huì)話歷史中的上一頁(yè),跟瀏覽器的回退按鈕功能相同 history.forward():指向?yàn)g覽器會(huì)話歷史中的下一頁(yè),跟瀏覽器的前進(jìn)按鈕相同 history.go(): 可以跳轉(zhuǎn)到瀏覽器會(huì)話歷史中的指定的某一個(gè)記錄頁(yè) history.pushState()可以將給定的數(shù)據(jù)壓入到瀏覽器會(huì)話歷史棧中,該方法接收3個(gè)參數(shù),對(duì)象,title和一串url。pushState后會(huì)改變當(dāng)前頁(yè)面url history.replaceState()將當(dāng)前的會(huì)話頁(yè)面的url替換成指定的數(shù)據(jù),replaceState后也會(huì)改變當(dāng)前頁(yè)面的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如何無(wú)刷新監(jiān)聽URL的變化的文章就介紹到這了,更多相關(guān)js 無(wú)刷新監(jiān)聽url變化內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. PHP laravel實(shí)現(xiàn)導(dǎo)出PDF功能2. vscode運(yùn)行php報(bào)錯(cuò)php?not?found解決辦法3. Python使用Selenium自動(dòng)進(jìn)行百度搜索的實(shí)現(xiàn)4. Python基于requests庫(kù)爬取網(wǎng)站信息5. 一文帶你徹底理解Java序列化和反序列化6. 微信小程序?qū)崿F(xiàn)商品分類頁(yè)過程結(jié)束7. Java commons-httpclient如果實(shí)現(xiàn)get及post請(qǐng)求8. JS中6個(gè)對(duì)象數(shù)組去重的方法9. 資深程序員:給Python軟件開發(fā)測(cè)試的25個(gè)忠告!10. python中文本字符處理的簡(jiǎn)單方法記錄

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