建站
咨詢
售后
建站咨詢
新聞中心
1. pushState使用pushStata方法可以向當(dāng)前瀏覽器歷史記錄棧中添加一條新紀(jì)錄。在點(diǎn)擊某個(gè)鏈接后想要?jiǎng)討B(tài)改變頁(yè)面URL地址，就能夠改變當(dāng)前頁(yè)面的URL地址了。
近年來(lái)，隨著互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展和用戶需求的不斷提升，前端頁(yè)面跳轉(zhuǎn)已成為了每個(gè)網(wǎng)站必備的功能之一。而在這方面，HTML5 history新增加了兩個(gè)非常實(shí)用的API——pushState和replaceState。
那么這兩個(gè)API到底是什么呢？它們又有哪些優(yōu)點(diǎn)呢？下面就讓我們一起來(lái)探究一下吧！
首先，我們需要明確一個(gè)概念——瀏覽器歷史記錄。簡(jiǎn)單來(lái)說(shuō)，當(dāng)你在瀏覽器中打開(kāi)一個(gè)網(wǎng)頁(yè)時(shí)，瀏覽器會(huì)將該網(wǎng)頁(yè)信息存儲(chǔ)在一個(gè)歷史記錄列表中，并且可以通過(guò)“后退”、“前進(jìn)”按鈕進(jìn)行導(dǎo)航操作。
而pushState和replaceState正是針對(duì)這樣的歷史記錄進(jìn)行操作的API。具體地說(shuō)：
1. pushState
使用pushStata方法可以向當(dāng)前瀏覽器歷史記錄棧中添加一條新紀(jì)錄。其語(yǔ)法如下：
```javascript
window.history.pushState(stateObj, title, url);
```
其中stateObj表示要保存到history.state對(duì)象中的狀態(tài)數(shù)據(jù)；title表示標(biāo)題（目前大多數(shù)瀏覽器都無(wú)視此參數(shù)）；url表示URL地址。
例如，在點(diǎn)擊某個(gè)鏈接后想要?jiǎng)討B(tài)改變頁(yè)面URL地址，可以使用如下代碼：
window.history.pushState(null, null, '/new-url');
這樣，在不刷新頁(yè)面的情況下，就能夠改變當(dāng)前頁(yè)面的URL地址了。
2. replaceState
與pushState類似，replaceStata方法也可以向?yàn)g覽器歷史記錄棧中添加一條新紀(jì)錄。但是與pushState不同之處在于，replaceStata會(huì)將當(dāng)前瀏覽器歷史記錄棧頂?shù)臓顟B(tài)替換為新?tīng)顟B(tài)。其語(yǔ)法如下：
window.history.replaceState(stateObj, title, url);
同樣地，stateObj表示要保存到history.state對(duì)象中的狀態(tài)數(shù)據(jù)；title表示標(biāo)題（目前大多數(shù)瀏覽器都無(wú)視此參數(shù)）；url表示URL地址。
例如，在某個(gè)操作后需要跳轉(zhuǎn)到一個(gè)新頁(yè)面，并且希望該新頁(yè)面沒(méi)有留下原來(lái)那個(gè)舊頁(yè)面的歷史記錄時(shí)，就可以使用replaceStata方法：
window.history.replaceState(null, null, '/new-page');
這樣，在跳轉(zhuǎn)后用戶點(diǎn)擊“后退”按鈕時(shí)就直接回到上一個(gè)非替換式導(dǎo)航頁(yè)而不是回到被替換掉的那個(gè)頁(yè)。
以上兩種API使得我們完全可以通過(guò)JavaScript動(dòng)態(tài)修改URL而無(wú)需進(jìn)行實(shí)際請(qǐng)求和響應(yīng)操作從而達(dá)到前端路由功能。同時(shí)它們還有以下優(yōu)點(diǎn)：
1. 使得我們能夠更好地控制網(wǎng)站或者應(yīng)用的狀態(tài)。
2. 在Ajax和HTML5歷史API技術(shù)結(jié)合下，可以實(shí)現(xiàn)更好的前端路由效果，從而提升用戶體驗(yàn)。
3. 可以避免頁(yè)面刷新或者跳轉(zhuǎn)操作帶來(lái)的不必要開(kāi)銷。例如，在某些單頁(yè)應(yīng)用中，每次點(diǎn)擊鏈接都需要重新加載整個(gè)頁(yè)面顯然是不可取的。
總之，HTML5 history新增加的pushState和replaceState API為我們提供了更多控制瀏覽器歷史記錄棧、改變URL地址等方面功能。它們?cè)谇岸寺酚煞矫婢哂泻艽鬂摿Γ⑶夷軌驑O大地提升網(wǎng)站或者應(yīng)用程序性能和用戶體驗(yàn)。因此，在今后開(kāi)發(fā)過(guò)程中將會(huì)越來(lái)越廣泛使用這兩個(gè)API！
本文題目：HTML5history新特性pushState、replaceState：開(kāi)啟前端頁(yè)面跳轉(zhuǎn)新時(shí)代
網(wǎng)站網(wǎng)址：http://m.5511xx.com/article/cdjosdd.html
