JavaScript不刷新實現(xiàn)瀏覽器的前進后退功能
最近在學(xué)習(xí)backbone，學(xué)習(xí)理解backbone就要先理解spa，理解spa就要先了解單頁面應(yīng)用是如何做到頁面不刷新改變url的。
相較于不同頁面的跳轉(zhuǎn)，AJAX可以說大大提高了用戶的瀏覽體驗，不用看到頁面切換之間的白屏是件很愜意的事情。但是很多早先的AJAX應(yīng)用是不支持瀏覽器的前進后退的，這導(dǎo)致了用戶不管在網(wǎng)站里瀏覽到何處，一旦刷新就會立刻回到起初的位置，并且用戶也無法通過瀏覽器的前進后退按鈕來實現(xiàn)瀏覽歷史的切換。
對于第一個問題，解決還算容易，只要用cookie或者localStorage來記錄應(yīng)用的狀態(tài)即可，刷新頁面時讀取一下這個狀態(tài)，然后發(fā)送相應(yīng)ajax請求來改變頁面即可。但是第二個問題就很麻煩了，先說下現(xiàn)代瀏覽器的解決方案。
HTML5 解決方案
要了解HTML5如何實現(xiàn)前進后退，就要先了解下history對象和location對象。
history對象
History 對象屬性
1.length：返回瀏覽器歷史列表中的URL數(shù)量，用戶在當(dāng)前標(biāo)簽每訪問一個頁面，此數(shù)量加1。因為隱私原因，URL具體內(nèi)容不可見。
2.state：與當(dāng)前網(wǎng)址相關(guān)的對象，只能通過pushState和replaceState添加或修改。我們可以可以用它來存儲跟url有關(guān)的信息。
History 對象方法
1.history.back()
此方法無參數(shù)，觸發(fā)后會返回前一個瀏覽的頁面，相當(dāng)于點擊了瀏覽器的后退按鈕。
2.history.forward()
此方法無參數(shù)，觸發(fā)后會返回后退前瀏覽的頁面，相當(dāng)于點擊了瀏覽器的前進按鈕。
3.history.go(number)
此方法接受一個整形變量參數(shù)，history.go(-1)相當(dāng)于后退一頁，history.go(1)相當(dāng)于前進一頁，history.go(0)會刷新當(dāng)前頁面。
4.history.pushState(state, title, url)
改變url且不刷新頁面的關(guān)鍵就是它了，此方法會改變當(dāng)前頁面的location.href并且修改當(dāng)前的history.state對象，執(zhí)行后history.length會增加1。此方法接受三個參數(shù)，
1.state：當(dāng)前網(wǎng)址相關(guān)的對象。
2.title：頁面標(biāo)題，但是所有瀏覽器都忽略它，要改變標(biāo)題還是要用document.title。
3.url：一個與當(dāng)前頁面同域的網(wǎng)址，location.href會變成此值。
5.history.replaceState(state, title, url)
此方法同上，但是它不會改變history.length，只會修改當(dāng)history.state和location.href。
注意pushState和replaceState第三個參數(shù)不可跨域，并且不會觸發(fā)瀏覽器的popstate事件和onhashchange事件(chrome33下測試)。
location對象
除了點擊前進/后退按鈕和history事件，還可以通過location的方法和修改location的屬性來改變Url：
location對象的屬性(讀寫)：
1.host:域名+端口號
2.hostname:域名
3.port:端口號
4.protocol:協(xié)議
5.href：完整路徑
6.origin：協(xié)議+域名+端口
7.hash：井號 (#) 開始的 URL(hash)
8.pathname:文檔路徑+文檔名
9.search:(?)后面的內(nèi)容
可以通過改變location.href或location.hash來達到無刷新的目的。
location對象的方法：
1.assign:改變url的值，并且將當(dāng)前的url添加到歷史記錄中history.length會增加1。location.assig(‘#' + x)會改變url但是不刷新頁面。
2.reload:刷新頁面。
3.replace:改變url的值，但是history.length不變。使用方法同assign。
popstate事件
當(dāng)url改變時，比如用戶點擊前進/后退按鈕，history.go(n)（n不等于0）,location.hash = x(x不等于當(dāng)前的location.hash)都會觸發(fā)此事件?？梢杂盟鼇肀O(jiān)聽url，來實現(xiàn)各種功能。
window.onpopstate = function(){
//do sth
}
onhashchange事件
改變hash值會觸發(fā)popstate事件，而觸發(fā)popstate事件不一定會觸發(fā)onhashchange事件。經(jīng)過測試：
1.hash改變但是location.pathname不變會觸發(fā)onhashchange事件，比如history.pushState(”, ”, ‘#abc');
2.hash和location.pathname一起改變則不觸發(fā)，比如history.pushState(”, ”, ‘a(chǎn)#abc');
老舊瀏覽器的寫法
老舊瀏覽器也不支持pushState和replaceState，所以通過popstate(事實上也不支持這個方法)監(jiān)聽url變化的路走不通。那么只能通過改變url#后面的內(nèi)容來達到無刷新，但是它們又不支持onhashchange，所以對url的變化是無動于衷的(除了頁面會滾動至頁面對應(yīng)id的位置)。那么只能祭出大招：輪詢，起一個setInterval來監(jiān)聽url的值。Like this:
var prevHash = window.location.hash;
var callback = function(){...}
window.setInterval(function() {
if (window.location.hash != prevHash) {
prevHash = window.location.hash;
callback(prevHash);
}
}, 100);
當(dāng)然這樣寫非常非常挫，如果不考慮點擊頁面帶有id的a標(biāo)簽來改變hash的情況，可以利用設(shè)計模式來優(yōu)雅的實現(xiàn)監(jiān)聽url。比如經(jīng)典的觀察者模式，專門用一個類來實現(xiàn)改變hash的功能，然后所有要監(jiān)聽url變化的類(觀察者)去訂閱這個(被觀察者)類。
//改變url的類
function UrlChanger() {
var _this = this;
this.observers = [];
//添加觀察者
this.addObserver = function(obj) {...}
//刪除觀察者
this.deleteObserver = function(obj) {...}
//通知觀察者
this._notifyObservers = function() {
var length = _this.observers.length;
console.log(length)
for(var i = 0; i < length; i++) {
_this.observers[i].update();
}
}
//改變url
this.changeUrl = function(hash) {
window.location.hash = hash;
_this._notifyObservers();
}
}
//監(jiān)聽類
function oneOfObservers() {
var _this = this;
this.update = function() {...}
}
//實現(xiàn)
var o1 = new UrlChanger();
var o2 = new oneOfObservers();
o1.addObserver(o2);
o1.changeUrl('fun/arg1/arg2/');
//o2 has do sth...
相關(guān)文章
這篇文章全面解析Bootstrap彈窗的實現(xiàn)方法，對其結(jié)構(gòu)進行詳細分析，感興趣的小伙伴們可以參考一下2015-12-12
react-router-dom?v6?通過outlet實現(xiàn)keepAlive?功能的實現(xiàn)
本文主要介紹了react-router-dom?v6?通過outlet實現(xiàn)keepAlive功能，文中根據(jù)實例編碼詳細介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)跟隨滾動緩沖運動廣告框，頁面左右兩邊跟隨式廣告框，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
利用Js+Css實現(xiàn)折紙動態(tài)導(dǎo)航效果實例源碼
這篇文章主要給大家介紹了利用Js+Css實現(xiàn)折紙動態(tài)導(dǎo)航的效果，實現(xiàn)后的效果非常不錯，文中給出了簡單的介紹和完整的實例代碼，對大家具有一定的參考價值，有需要的朋友們下面來一起看看吧。2017-01-01
jQuery AJAX回調(diào)函數(shù)this指向問題
了解JavaScript的人都知道JavaScript的this不總是指向當(dāng)前對象，函數(shù)或類中的this指向與調(diào)用這個函數(shù)的對象以及上下文環(huán)境是息息相關(guān)的。2010-02-02
javascript DOM設(shè)置樣式詳細說明和示例代碼
JavaScript也可以用來修改DOM元素的樣式,我們可以使用style屬性來訪問和修改元素的樣式屬性,這篇文章主要給大家介紹了關(guān)于javascript DOM設(shè)置樣式詳細說明和示例代碼的相關(guān)資料,需要的朋友可以參考下2024-06-06
JS中const對于復(fù)雜類型變量和普通類型變量的區(qū)別詳解
我們在開發(fā)的過程中一定常常發(fā)現(xiàn)const關(guān)鍵字定義的簡單類型變量不可以改變,但是你如果定義的是一個復(fù)雜類型變量（比如對象）的話對里面屬性的增刪改查是可以的,那這又是為什么呢,接下來就來和小編一起探討一下吧2023-11-11
下面小編就為大家分享一篇移動前端圖片壓縮上傳的實例。具有很好的參考價值，希望對大家有所幫助。一起小編過來看看吧2017-12-12
這是我總結(jié)多年的一個小文檔，最近看見有人咨詢?yōu)g覽器兼容的問題，就貢獻出來。2010-05-05
這篇文章主要介紹了TypeScript中函數(shù)重載寫法，TypeScript 提供了函數(shù)重載功能，下面文章圍繞TypeScript函數(shù)重載續(xù)航管資料展開內(nèi)容,具有一定得參考價值，需要的朋友可以參考一下2021-12-12