JavaScript五花八門的跳轉(zhuǎn)方式

我們最常見的跳轉(zhuǎn)方式是location.href = "http://www.baidu.com"， 這種是最常見的，但是常常使用location.replace，location.assign,，window.open，history.replaceState，location.reload等，這些跳轉(zhuǎn)或者說與跳轉(zhuǎn)相關(guān)的代碼有什么作用？用在什么場合，會有那些坑嗎？本文就圍著跳轉(zhuǎn)相關(guān)的JavaScript api和html技術(shù)來了解一下瀏覽器跳轉(zhuǎn)。

1. location.href

最常見的一種跳轉(zhuǎn)，location.href是一個可讀寫的屬性，直接給它賦值就可以實(shí)現(xiàn)跳轉(zhuǎn)。此外window.location.href和document.location.href都可以對當(dāng)前窗口進(jìn)行重定向。

location提供當(dāng)前窗口文檔相關(guān)信息，還提供導(dǎo)航功能，一般情況下location對象是window對象的屬性也是document對象的屬性，當(dāng)服務(wù)器未發(fā)生重定向時，window.location和document.location等效，但是當(dāng)服務(wù)器發(fā)生了重定向，就不一樣了，如下：

• document.location包含的是已經(jīng)裝載的URL
• window.location.href包含的則是原始請求的文檔的URL

2. window.top，window.parent，window.self

當(dāng)頁面有frameset或者iframe頁面，并且有嵌套的情況，parent是父窗口，top是最頂層父窗口，self是當(dāng)前窗口。
window.self是當(dāng)前窗口自身的引用，它和window對象是等價(jià)的。window，self，window.self屬性是等價(jià)的。
window.top返回頂層窗口，即瀏覽器窗口，如果窗口本身就是瀏覽器窗口，top屬性返回的是對自身的引用。
window.parent返回父窗口，如果窗口本身是頂層窗口，parent屬性返回對自身的引用。

他們都有l(wèi)ocation屬性，并且可以跳轉(zhuǎn)。

3. window.location.href

最常見的一種跳轉(zhuǎn)方式

3. location.replace

location.replace(url)方法用給定的url參數(shù)替換當(dāng)前的頁面資源，調(diào)用后當(dāng)前頁面不會保存到會話歷史中，例如history，session，調(diào)用location.replace之后用戶點(diǎn)擊回退按鈕時將不會再跳轉(zhuǎn)到當(dāng)前頁面。

4. location.assign

location.assign會添加記錄到瀏覽歷史，點(diǎn)擊后退可以返回之前頁面。觸發(fā)窗口加載并顯示指定的url內(nèi)容，和location.href不同的是如果location.assign(url)的參數(shù)和頁面當(dāng)前url屬于不同的域的時候，會拋出一個安全錯誤AECURITY_ERROR。

5. history

從瀏覽器打開一個頁面開始，history對象保存用戶的上網(wǎng)記錄。由于安全原因，瀏覽器不會暴露用戶瀏覽過的url地址，但是借助history，可以在不知道實(shí)際url的情況下實(shí)現(xiàn)頁面前進(jìn)和后退。

5.1 history.go

使用history.go方法可以在用戶的歷史記錄中任意跳轉(zhuǎn)。方法接收一個整數(shù)值參數(shù)，標(biāo)識向前或向后跳轉(zhuǎn)的頁面的個數(shù)。負(fù)數(shù)標(biāo)識向后跳轉(zhuǎn)，類似后退按鈕，正數(shù)表示向前跳轉(zhuǎn)，類似前進(jìn)按鈕，0或者不傳參數(shù)可以刷新當(dāng)前頁面。

5.2 history.back

back方法用于模擬瀏覽器后退按鈕，相當(dāng)于history.go(-1)

5.3 history.forward

forward方法用于模擬瀏覽器的前進(jìn)按鈕，相當(dāng)于history.go(1)

注意：使用以上三個方法時如果移動的位置超出history邊界，并不報(bào)錯，而是靜默失敗。使用歷史記錄時，頁面從瀏覽器緩存中加載，不是要求服務(wù)器重重新發(fā)送新的網(wǎng)頁。

5.4 history.pushState

HTML5為history對象添加了兩個新的方法，history.pushState，history.replaceState，用來在瀏覽器中添加和修改history記錄，而window.onpopstate用來監(jiān)聽history對象的變化。
pushState方法用來向?yàn)g覽器歷史中添加一個記錄，它有三個參數(shù)：一個對象，一個標(biāo)題，一個可選的URL地址：

history.pushState(state, title, url)

• state：狀態(tài)對象是一個由pushState方法創(chuàng)建的，與歷史記錄相關(guān)的JavaScript對象。當(dāng)用戶導(dǎo)航到新狀態(tài)時，會觸發(fā)popstate事件，并且該事件的狀態(tài)屬性包含歷史記錄條目的對象的副本。狀態(tài)對象可以是任何可以序列化的對象。
  firefox會把狀態(tài)對象保存到用戶的磁盤上，這樣用戶重啟瀏覽器之后可以將其還原，所以這個對象的序列化結(jié)果又2MB的大小限制。

• title：大多數(shù)的瀏覽器都忽略這個參數(shù)，傳遞空字符串可以防止將來對方法的更改。

• url：新的URL。注意在調(diào)用pushState之后瀏覽器不會嘗試加載此URL，但是可能會在用戶重啟瀏覽器后重新加載這個URL。新的URL不必是絕對地址，如果是相對的，則相對于當(dāng)前的URL進(jìn)行解析。新的URL需要和當(dāng)前的URL的origin相同，否則會拋出異常。如果未指定此參數(shù)，則將其設(shè)置為當(dāng)前的URL。

pushState有一個很常見的用法是在后臺管理項(xiàng)目中，如果經(jīng)常會有tab頁展示的情況，例如：每次點(diǎn)擊左側(cè)的菜單欄新增一個tag，同時使用pushState添加一條狀態(tài)，這樣點(diǎn)擊瀏覽器后退的時候就會從當(dāng)前tab頁回退到上一個tab頁。

5.5 history.replaceState

把當(dāng)前頁面的歷史記錄替換掉，它最大的特點(diǎn)是添加或者替換歷史記錄之后，瀏覽器會變成你指定的地址，而頁面并不會重新載入或跳轉(zhuǎn)。

例如，假設(shè)當(dāng)前頁面地址是foo.com/1.html, 且history中只有一條當(dāng)前頁面的記錄。當(dāng)執(zhí)行history.pushState(null, null, '2.html')后，瀏覽器的地址將會變成foo.com/2.html, 但是并不會跳轉(zhuǎn)2.html，甚至不會去檢查2.html是否存在，只是加入一個最新的歷史記錄。此時history中會有2條記錄。假如點(diǎn)擊頁面上的一個超鏈接跳轉(zhuǎn)到另外一個頁面后，點(diǎn)擊后退按鈕，url會變成foo.com/2.html, 如果此前在瀏覽器緩存中有1.html的話，會顯示1.html的內(nèi)容，否則會向服務(wù)器發(fā)起foo.com/2.html 的請求。如果再次點(diǎn)后退，url會變成foo.com/1.html

而如果執(zhí)行history.replaceState('foo.com/2.html')的話，瀏覽器地址也會顯示foo.com/2.html, 區(qū)別是history中只有當(dāng)前2.html的記錄，而1.html的記錄已經(jīng)被替換掉。

6.window.navigate

window.navigate("http://www.baidu.com/") 這個方法是只針對IE的，不適用于火狐等其他瀏覽器，在HTML DOM Window Object中，根本沒有列出window.navigate這個方法，所以這個方法盡量少用。

7.html超鏈接

這也是一種很常見的跳轉(zhuǎn)方式，用法如下：
簡單的鏈接：

<a  title="百度">百度</a>

外部鏈接，點(diǎn)擊時，會新開一個tab頁

<a  title="百度" target="_blank">百度</a>

除此之外，還可以使用超鏈接實(shí)現(xiàn)其他的功能，例如下載，打開電話撥號，打開email等。

下載圖片：

<a  download>下載</a>

打開電話

<a href="tel:+86177******">打電話給張三</a>

發(fā)送email

<a href="mailto:zhangsan@qq.com" cc="李四@gmail.com">發(fā)郵件給張三并抄送給李四</a>

8.meta標(biāo)簽

html文檔的頭部meta標(biāo)簽中有個屬性http-equiv="Refresh"，有兩種用途：一是網(wǎng)頁定時刷新，而是自動跳轉(zhuǎn)到指定頁面，不需要調(diào)用js，也不需要點(diǎn)擊超鏈接。
自動刷新實(shí)用性不強(qiáng)，一般會使用setInterval或者websocket技術(shù)實(shí)現(xiàn)。
自動跳轉(zhuǎn)在一些網(wǎng)站中很常見，例如進(jìn)入網(wǎng)站先顯示一個歡迎頁面，3秒后跳轉(zhuǎn)到另外一個頁面，如下代碼：

<meta http-equiv="refresh" content="3;url=http://www.baidu.com">

使用meta標(biāo)簽3秒后跳轉(zhuǎn)到百度。