技術文章 » JavaScript五花八門的跳轉方式

JavaScript五花八門的跳轉方式

2023-02-08 06:00:38

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

1.location.href

最常見的一種跳轉，location.href是一個可讀寫的屬性，直接給它賦值就可以實現跳轉。此外window.location.href和document.location.href都可以對當前視窗進行重定向。

location提供當前視窗檔案相關資訊，還提供導航功能，一般情況下location物件是window物件的屬性也是document物件的屬性，當伺服器未發生重定向時，window.location和document.location等效，但是當伺服器發生了重定向，就不一樣了，如下：

  • document.location包含的是已經裝載的URL
  • window.location.href包含的則是原始請求的檔案的URL

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

當頁面有frameset或者iframe頁面，並且有巢狀的情況，parent是父視窗，top是最頂層父視窗，self是當前視窗。
window.self是當前視窗自身的參照，它和window物件是等價的。window，self，window.self屬性是等價的。
window.top返回頂層視窗，即瀏覽器視窗，如果視窗本身就是瀏覽器視窗，top屬性返回的是對自身的參照。
window.parent返回父視窗，如果視窗本身是頂層視窗，parent屬性返回對自身的參照。

他們都有location屬性，並且可以跳轉。

3.window.location.href

最常見的一種跳轉方式

3.location.replace

location.replace(url)方法用給定的url引數替換當前的頁面資源，呼叫後當前頁面不會儲存到對談歷史中，例如history，session，呼叫location.replace之後使用者點選回退按鈕時將不會再跳轉到當前頁面。

4.location.assign

location.assign會新增記錄到瀏覽歷史，點選後退可以返回之前頁面。觸發視窗載入並顯示指定的url內容，和location.href不同的是如果location.assign(url)的引數和頁面當前url屬於不同的域的時候，會丟擲一個安全錯誤AECURITY_ERROR。

4.history

從瀏覽器開啟一個頁面開始，history物件儲存使用者的上網記錄。由於安全原因，瀏覽器不會暴露使用者瀏覽過的url地址，但是藉助history，可以在不知道實際url的情況下實現頁面前進和後退。

history.go

使用history.go方法可以在使用者的歷史記錄中任意跳轉。方法接收一個整數值引數，標識向前或向後跳轉的頁面的個數。負數標識向後跳轉，類似後退按鈕，正數表示向前跳轉，類似前進按鈕，0或者不傳引數可以重新整理當前頁面。

history.back

back方法用於模擬瀏覽器後退按鈕，相當於history.go(-1)

history.forward

forward方法用於模擬瀏覽器的前進按鈕，相當於history.go(1)

注意：使用以上三個方法時如果移動的位置超出history邊界，並不報錯，而是靜默失敗。使用歷史記錄時，頁面從瀏覽器快取中載入，不是要求伺服器重重新傳送新的網頁。

history.pushState

HTML5為history物件新增了兩個新的方法，history.pushState，history.replaceState，用來在瀏覽器中新增和修改history記錄，而window.onpopstate用來監聽history物件的變化。
pushState方法用來向瀏覽器歷史中新增一個記錄，它有三個引數：一個物件，一個標題，一個可選的URL地址：

history.pushState(state, title, url)

  • state：狀態物件是一個由pushState方法建立的，與歷史記錄相關的JavaScript物件。當用戶導航到新狀態時，會觸發popstate事件，並且該事件的狀態屬性包含歷史記錄條目的物件的副本。狀態物件可以是任何可以序列化的物件。
    firefox會把狀態物件儲存到使用者的磁碟上，這樣使用者重啟瀏覽器之後可以將其還原，所以這個物件的序列化結果又2MB的大小限制。

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

  • url：新的URL。注意在呼叫pushState之後瀏覽器不會嘗試載入此URL，但是可能會在使用者重啟瀏覽器後重新載入這個URL。新的URL不必是絕對地址，如果是相對的，則相對於當前的URL進行解析。新的URL需要和當前的URL的origin相同，否則會丟擲異常。如果未指定此引數，則將其設定為當前的URL。

pushState有一個很常見的用法是在後臺管理專案中，如果經常會有tab頁展示的情況，例如：每次點選左側的選單欄新增一個tag，同時使用pushState新增一條狀態，這樣點選瀏覽器後退的時候就會從當前tab頁回退到上一個tab頁。

history.replaceState

把當前頁面的歷史記錄替換掉，它最大的特點是新增或者替換歷史記錄之後，瀏覽器會變成你指定的地址，而頁面並不會重新載入或跳轉。

例如，假設當前頁面地址是foo.com/1.html, 且history中只有一條當前頁面的記錄。當執行history.pushState(null, null, '2.html')後，瀏覽器的地址將會變成foo.com/2.html, 但是並不會跳轉2.html，甚至不會去檢查2.html是否存在，只是加入一個最新的歷史記錄。此時history中會有2條記錄。假如點選頁面上的一個超連結跳轉到另外一個頁面後，點選後退按鈕，url會變成foo.com/2.html, 如果此前在瀏覽器快取中有1.html的話，會顯示1.html的內容，否則會向伺服器發起foo.com/2.html 的請求。如果再次點後退，url會變成foo.com/1.html

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

6.window.navigate

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

9.html超連結

這也是一種很常見的跳轉方式，用法如下：
簡單的連結：

<a href="http://www.baidu.com" title="百度">百度</a>

外部連結，點選時，會新開一個tab頁

<a href="http://www.baidu.com" title="百度" target="_blank">百度</a>

除此之外，還可以使用超連結實現其他的功能，例如下載，開啟電話撥號，開啟email等。

下載圖片：

<a href="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" download>下載</a>

開啟電話

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

傳送email

<a href="mailto:[email protected]" cc="李四@gmail.com">發郵件給張三並抄送給李四</a>

10.meta標籤

html檔案的頭部meta標籤中有個屬性http-equiv="Refresh"，有兩種用途：一是網頁定時重新整理，而是自動跳轉到指定頁面，不需要呼叫js，也不需要點選超連結。
自動重新整理實用性不強，一般會使用setInterval或者websocket技術實現。
自動跳轉在一些網站中很常見，例如進入網站先顯示一個歡迎頁面，3秒後跳轉到另外一個頁面，如下程式碼：

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

使用meta標籤3秒後跳轉到百度。