js實現(xiàn)無刷新監(jiān)聽URL的變化示例代碼詳解

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

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

無刷新改變路由的兩種方法通過hash改變路由

代碼

window.location.hash='edit'

效果

http://xxxx/#edit

通過history改變路由

history.back(): 返回瀏覽器會話歷史中的上一頁，跟瀏覽器的回退按鈕功能相同
history.forward():指向瀏覽器會話歷史中的下一頁，跟瀏覽器的前進按鈕相同
history.go(): 可以跳轉(zhuǎn)到瀏覽器會話歷史中的指定的某一個記錄頁
history.pushState()可以將給定的數(shù)據(jù)壓入到瀏覽器會話歷史棧中，該方法接收3個參數(shù)，對象，title和一串url。pushState后會改變當前頁面url
history.replaceState()將當前的會話頁面的url替換成指定的數(shù)據(jù)，replaceState后也會改變當前頁面的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()那么會觸發(fā)popstate事件

window.addEventListener('popstate', function(event) {
  console.log(event);
})

但是，history.pushState()和history.replaceState()不會觸發(fā)popstate事件，所以需要自己手動增加事件

監(jiān)聽pushState/replaceState

history.replaceState和pushState不會觸發(fā)popstate事件，那么如何監(jiān)聽這兩個行為呢。可以通過在方法里面主動的去觸發(fā)popstate事件。另一種就是在方法中創(chuàng)建一個新的全局事件。

改造

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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

原生JavaScript實現(xiàn)Ajax異步請求
ajax現(xiàn)在是一種非常流行的技術(shù)，現(xiàn)在雖然可以利用JQuery或者一些第三方插件甚至微軟提供的一些控件可以方面的實現(xiàn)ajax功能，但是明白其原理也是非常重要的，下面是來使用純javascript實現(xiàn)獲取服務(wù)器端的功能來展示如何使用純javascript實現(xiàn)ajax功能，以弄清其原理.
2017-11-11
JavaScript實現(xiàn)時間格式的切割與轉(zhuǎn)換
這篇文章主要為大家詳細介紹了使用JavaScript實現(xiàn)時間格式的切割與轉(zhuǎn)換的相關(guān)知識,文中的示例代碼講解詳細,有需要的小伙伴可以參考一下
2024-04-04
js對象實現(xiàn)數(shù)據(jù)分頁效果
這篇文章主要為大家詳細介紹了js對象實現(xiàn)數(shù)據(jù)分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
Bootstrap的popover（彈出框）2秒后定時消失的實現(xiàn)代碼
Bootstrap Popover（彈出框）是使用定制的 Jquery 插件創(chuàng)建的。它可以用來顯示任何元素的一些信息。這篇文章主要介紹了Bootstrap的popover（彈出框）2秒后定時消失功能，需要的朋友參考下
2017-02-02
js實現(xiàn)json數(shù)組分組合并操作示例
這篇文章主要介紹了js實現(xiàn)json數(shù)組分組合并操作,涉及javascript針對json數(shù)組的遍歷、判斷、添加、賦值等相關(guān)操作技巧,需要的朋友可以參考下
2019-02-02
javascript Onunload與Onbeforeunload使用小結(jié)
Onunload，onbeforeunload都是在刷新或關(guān)閉時調(diào)用，可以在<script>腳本中通過window.onunload來指定或者在<body>里指定。區(qū)別在于onbeforeunload在onunload之前執(zhí)行，它還可以阻止onunload的執(zhí)行。
2009-12-12
JS煙花背景效果實現(xiàn)方法
這篇文章主要介紹了JS煙花背景效果實現(xiàn)方法,實例分析了javascript操作dom元素實現(xiàn)煙花特效的技巧,需要的朋友可以參考下
2015-03-03
CSS3+JavaScript實現(xiàn)翻頁幻燈片效果
這篇文章主要介紹了CSS3+JavaScript實現(xiàn)翻頁幻燈片效果,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-06-06
JS繼承定義與使用方法簡單示例
這篇文章主要介紹了JS繼承定義與使用方法,結(jié)合完整實例形式分析了JavaScript繼承的基本定義、用法及操作注意事項,需要的朋友可以參考下
2020-02-02
ECMA5數(shù)組的新增方法有哪些及forEach（）模仿實現(xiàn)
這篇文章主要介紹了ECMA5數(shù)組的新增方法有哪些及forEach（）模仿實現(xiàn),需要的朋友可以參考下
2015-11-11