快捷導(dǎo)航

js實(shí)現(xiàn)無(wú)刷新監(jiān)聽(tīng)URL的變化示例代碼詳解

更新時(shí)間：2020年06月03日 15:49:54 作者：zpfei

這篇文章主要介紹了js如何無(wú)刷新監(jiān)聽(tīng)URL的變化,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

無(wú)刷新改變路由的兩種方法通過(guò)hash改變路由

代碼

window.location.hash='edit'

效果

http://xxxx/#edit

通過(guò)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)聽(tīng)url變化

監(jiān)聽(tīng)hash變化

window.onhashchange=function(event){
 console.log(event);
}
//或者
window.addEventListener('hashchange',function(event){
 console.log(event);
})

監(jiān)聽(tīng)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)聽(tīng)pushState/replaceState

history.replaceState和pushState不會(huì)觸發(fā)popstate事件，那么如何監(jiān)聽(tīng)這兩個(gè)行為呢?？梢酝ㄟ^(guò)在方法里面主動(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)聽(tīng)

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)聽(tīng)URL的變化的文章就介紹到這了,更多相關(guān)js 無(wú)刷新監(jiān)聽(tīng)url變化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: