【前端開發】如何使用 JavaScript 進行頁面的轉址?

更新於 發佈於 閱讀時間約 3 分鐘

在前端開發中,很常會有需要轉址的需求,且處理的手法滿因人而異的,所以今天就想要來整理一些常見的 JavaScript 頁面轉址方式,以及各自的差異。

以下作法建立在瀏覽器上全域物件 Window 底下 Location 的物件,這個物件提供了有關當前網頁的相關資訊,例如 URL、主機、路徑和查詢參數等,由於這篇文章的主旨並不是針對 Location 物件做討論,所以不會針對其底下的屬性一一介紹。

接著就讓我們來看看在開發實務上會有哪些常用的轉址方式吧!

window.location.href

window.location.href 是最常見的轉址方式, hreflocation 底下的一個屬性,我們會透過賦值給這個屬性來做到轉址且將這個變化加入到歷史紀錄中,這樣使用者在切換頁面時,就可以透過上下一步找到此頁面:

window.location.href = 'https://www.ccc.ooo';

window.location.assign()

如果覺得 window.location.href 長得醜醜的, window.location.assign() 方法一樣可以透過帶入路徑參數來做到轉址:

window.location.assign('https://www.ccc.ooo');

這個方法與 window.location.href 最大的差異是,今天萬一導向的是不同網域的頁面且觸發的該網域的資安防護, window.location.assign() 會拋出 SECURITY_ERROR 的錯誤訊息,做到更好的錯誤管理(雖然我目前還沒有確切遇到過)。

window.location.replace()

在有些情境下,使用者可能不小心進入邊緣情境,例如:根本沒有這個路徑。

此時我們可能會希望幫使用者做「重新導向」,一旦進入到指定頁面,我們把它轉向至首頁或是其他用來防呆用的頁面,且重新導向的過程中,該路徑不會被加入歷史紀錄,使用者就不會透過點擊上下一頁按鈕,而再次進入到錯誤的頁面中:

// 假設使用者不小心進入 <https://www.ccc.ooo/dsfsf>
// 我們使用 window.location.replace() 將頁面重新導向至 <https://www.ccc.ooo>
// <https://www.ccc.ooo/dsfsf> 將不會出現在歷史紀錄中
window.location.repalce('https://www.ccc.ooo');

window.location.assign() 相同的是:今天萬一導向的是不同網域的頁面且觸發的該網域的資安防護, window.location.replace() 會拋出 SECURITY_ERROR 的錯誤訊息。

小結

同樣都是透過 Location 物件來進行轉址,但能得到的結果與使用者體驗大不同,如果只是普通的靜態頁面也許用上述的這幾種方式都不會差去哪,但如果有一些 HTTP Request 、Token、流程有時效性或是有順序性,不能讓、或是允許使用者回溯的狀況,都可以透過上方的這些轉址方式做到細節的流程控制。

希望這篇文章可以幫助到跟我一樣,一開始不太清楚轉址流程的前端新手,我是 Vivian,我們下次見。

參考資料:

留言
avatar-img
留言分享你的想法!
avatar-img
Vivian Yeh - 跨領域轉職的軟體工程師
444會員
103內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶,不用腳踩十公分、連妝都可以不用化的職場人生,文組少女毅然決然踏上RD的養成日常。
2024/05/23
與 cookie 相比,localStorage 與 sessionStorage 的機制相對單純,兩者皆是瀏覽器中的儲存空間,與 cookie 最大的不同在於:localStorage 與 ⋯⋯
Thumbnail
2024/05/23
與 cookie 相比,localStorage 與 sessionStorage 的機制相對單純,兩者皆是瀏覽器中的儲存空間,與 cookie 最大的不同在於:localStorage 與 ⋯⋯
Thumbnail
2024/05/22
在瀏覽器環境中有許多的儲存空間,想要查看這些空間的話,可以透過「chrome > Dev Tools > Application > Storage」即能進行查看。 瀏覽器內存空間的差異不僅常常被拿來被當作面試考題,在實務開發中更扮演舉足輕重的角色,今天就想透過這系列的文章深度了解這些瀏覽器內存⋯
Thumbnail
2024/05/22
在瀏覽器環境中有許多的儲存空間,想要查看這些空間的話,可以透過「chrome > Dev Tools > Application > Storage」即能進行查看。 瀏覽器內存空間的差異不僅常常被拿來被當作面試考題,在實務開發中更扮演舉足輕重的角色,今天就想透過這系列的文章深度了解這些瀏覽器內存⋯
Thumbnail
2024/02/20
上一篇文章分享了 TypeScript 的定義、前端角色定位,如果你不是很確定「TypeScript 是什麼?」、「TypeScript 作為 JavaScript 的超集,在網頁開發扮演怎麼樣的角色?」這兩個問題的答案,建議可以回到上一篇先了解一下。
Thumbnail
2024/02/20
上一篇文章分享了 TypeScript 的定義、前端角色定位,如果你不是很確定「TypeScript 是什麼?」、「TypeScript 作為 JavaScript 的超集,在網頁開發扮演怎麼樣的角色?」這兩個問題的答案,建議可以回到上一篇先了解一下。
Thumbnail
看更多
你可能也想看
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
本篇文章介紹了路徑的概念和兩種不同的路徑運用。這些知識對於網頁開發非常重要,能夠幫助網站開發者更好地管理資源文件的位置。文章通過實際例子和相對路徑的範例來解釋這些概念。希望通過這篇文章,讀者能夠清楚地瞭解路徑的概念,並在日後的開發中能夠靈活運用。
Thumbnail
本篇文章介紹了路徑的概念和兩種不同的路徑運用。這些知識對於網頁開發非常重要,能夠幫助網站開發者更好地管理資源文件的位置。文章通過實際例子和相對路徑的範例來解釋這些概念。希望通過這篇文章,讀者能夠清楚地瞭解路徑的概念,並在日後的開發中能夠靈活運用。
Thumbnail
在之前的文章當中曾經提到過 JavaScript 中的物件有一個特別的機制:傳參考(Called by reference),如果正確性再高一點的話,則可以稱之為傳共享(Called by sharing)。
Thumbnail
在之前的文章當中曾經提到過 JavaScript 中的物件有一個特別的機制:傳參考(Called by reference),如果正確性再高一點的話,則可以稱之為傳共享(Called by sharing)。
Thumbnail
路徑處理 basename(string [.string]):回傳第一個參數路徑字串的檔案名稱,包含副檔案,如果有第二個參數字串,就會在檔案名稱刪除此字串,例如:刪除副檔名".php"。 dirname(string):回傳參數路徑字串中的路徑。 realpath(string):回傳參數路
Thumbnail
路徑處理 basename(string [.string]):回傳第一個參數路徑字串的檔案名稱,包含副檔案,如果有第二個參數字串,就會在檔案名稱刪除此字串,例如:刪除副檔名".php"。 dirname(string):回傳參數路徑字串中的路徑。 realpath(string):回傳參數路
Thumbnail
那麼「我要什麼資料」就需要告訴伺服器特定的內容啦,舉例來說: 我要登入,就必須把「帳號」和「密碼」一起帶在請求內,發送給後端進行驗證
Thumbnail
那麼「我要什麼資料」就需要告訴伺服器特定的內容啦,舉例來說: 我要登入,就必須把「帳號」和「密碼」一起帶在請求內,發送給後端進行驗證
Thumbnail
運用 Golang 正則表達式處理文本。從替換操作到 URL 解析,再到日誌分析,掌握實際應用場景下的正則技巧,提取、轉換和分析文本數據。
Thumbnail
運用 Golang 正則表達式處理文本。從替換操作到 URL 解析,再到日誌分析,掌握實際應用場景下的正則技巧,提取、轉換和分析文本數據。
Thumbnail
在前端開發中,很常會有需要轉址的需求,且處理的手法滿因人而異的,所以今天就想要來整理一些常見的 JavaScript 頁面轉址方式,以及各自的差異。
Thumbnail
在前端開發中,很常會有需要轉址的需求,且處理的手法滿因人而異的,所以今天就想要來整理一些常見的 JavaScript 頁面轉址方式,以及各自的差異。
Thumbnail
Hosts File 是一種可以取代 DNS 查詢的步驟 直接指定 domain 所指向的 IP 位址 甚至是不存在的 domain 也可以使用 hosts file 來給定 IP 位址
Thumbnail
Hosts File 是一種可以取代 DNS 查詢的步驟 直接指定 domain 所指向的 IP 位址 甚至是不存在的 domain 也可以使用 hosts file 來給定 IP 位址
Thumbnail
Basic config 最基本的寫法就是在 src/router/index.ts 的 routes 內設定像這樣 path 是設定路由,name 如果你沒有要用路由傳參,不寫也沒關係,component 是對應到哪個你寫的 vue 頁面 router-link 跟 <a></a> 很像,用法是像
Thumbnail
Basic config 最基本的寫法就是在 src/router/index.ts 的 routes 內設定像這樣 path 是設定路由,name 如果你沒有要用路由傳參,不寫也沒關係,component 是對應到哪個你寫的 vue 頁面 router-link 跟 <a></a> 很像,用法是像
Thumbnail
HTML一種建立網頁架構的程式語言,對於初學程式的人來說,HTML是非常好上手的。 它沒有不像是CSS及JavaScript,沒有複雜的邏輯,只要更改程式碼,馬上就可以透過瀏覽器或是模擬器將結果顯示出來。
Thumbnail
HTML一種建立網頁架構的程式語言,對於初學程式的人來說,HTML是非常好上手的。 它沒有不像是CSS及JavaScript,沒有複雜的邏輯,只要更改程式碼,馬上就可以透過瀏覽器或是模擬器將結果顯示出來。
Thumbnail
網址是 API 的門面,大家使用 API 的第一步就是要看它。 第一眼就要讓人就知道這隻 API 在做什麼? 甚至因為遵循標準(目前 REST 是主流),可以類推 API 應該會有什麼功能等等。
Thumbnail
網址是 API 的門面,大家使用 API 的第一步就是要看它。 第一眼就要讓人就知道這隻 API 在做什麼? 甚至因為遵循標準(目前 REST 是主流),可以類推 API 應該會有什麼功能等等。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News