資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究如何使用 JavaScript 重定向我的網頁？
您可能遇到過這種情況：點選某個 URL 跳轉到特定頁面，但實際上內部重定向到了另一個頁面。這就是頁面重定向的原因。重定向是指對一個頁面的 HTTP 請求立即導航到另一個頁面。它與簡單地重新載入網站不同。使用客戶端的原生 JavaScript 進行網頁重定向非常簡單。因此，在本文中，我們將學習如何使用原生 JavaScript 重定向網頁以及何時使用特定方法。
使用原生 JavaScript 實現網頁重定向有很多方法，但本文將介紹一些最知名、最高效和最典型的 JavaScript 重定向方法。
使用replace() 方法
使用window.location.href 進行重定向
使用 window 的assign() 方法
使用 replace() 方法
Location 介面的replace() 方法用給定 URL 上的資源替換當前資源。replace() 方法和assign() 方法的區別在於，使用replace() 後，當前頁面不會儲存在會話歷史記錄中，使用者無法透過按下後退按鈕返回到該頁面。
語法
使用者可以遵循以下語法使用window.location.replace() 方法。
window.location.replace("url");
location.replace(“url”); // without using window object引數
url − 此引數表示使用者將被重定向到的網頁。
示例
以下示例演示了在 JavaScript 中使用window.location.replace() 方法重定向網頁。
我們還可以將window.location.replace 替換為location.replace，因為兩者沒有區別。它們的結果相同（在瀏覽器中，window 物件是全域性物件）。我們可以使用 window 物件的屬性訪問全域性變數或函式。
指令碼標籤可以放在 HTML 的 head 部分或 body 部分，具體取決於您希望 JavaScript 何時載入。一般來說，JavaScript 程式碼可以包含在文件的 head 部分，並與 HTML 文件的主體文字分開。
<html>
<head>
<title>Example- Redirecting web page with JavaScript</title>
</head>
<body>
<h2>Redirecting web page with JavaScript</h2>
<p>Click the following button, to get redirected Using the replace() function</p>
<input type="button" value="Redirect Me" title="Redirect" onclick="Redirect()"/>
<script>
function Redirect() {
window.location.replace("https://tutorialspoint.tw");
}
</script>
</body>
</html>執行上述程式碼後，使用者可以看到他們是如何使用replace() 函式重定向到 tutorials point 首頁的，但無法使用後退按鈕返回到原始頁面。
使用 window.location.href 進行重定向
在這種方法中，我們將使用最常用的 JavaScript 技術來重定向 URL，這隻需更改 location 的 href 屬性即可實現。這是一個屬性，它將告知您瀏覽器當前的 URL 位置，而不是一個方法。如果屬性的值發生更改，頁面將重新載入。
您應該記住，window.location.href 並不總是向伺服器傳送請求，它從瀏覽器的快取中載入頁面。如果您的快取中存在較舊版本的頁面，它將重定向到該頁面，而不是從伺服器載入新頁面。
語法
window.location.href = "http://newURL.com";
示例
使用者可以透過以下示例學習如何重定向他們的頁面。
<html>
<head>
<title>Example- Redirecting web page with JavaScript</title>
</head>
<body>
<h2>Redirecting web page with JavaScript</h2>
<p>Click the following button, to get redirected Using the replace() function</p>
<input type="button" value="Redirect Me" title="Redirect" onclick="Redirect()"/>
<script>
function Redirect() {
window.location.replace("https://tutorialspoint.tw");
}
</script>
</body>
</html>執行上述程式碼後，使用者可以觀察到頁面是如何從瀏覽器的快取中載入的，並且沒有向伺服器傳送請求來載入新頁面（前提是使用者瀏覽器快取中存在舊版本的頁面）。
使用 Window assign() 方法
可以使用window.location.assign() 函式使用 JavaScript 重定向網頁。此過程會重定向到新新增的 URL 並將其新增到歷史堆疊。
現在的問題是是否使用replace() 方法或 assign 方法。兩者之間的實際區別在於，replace() 方法會從文件歷史記錄中刪除當前文件的 URL，因此無法使用“後退”按鈕返回到原始文件。
因此，如果您想載入新文件並允許使用者從重定向的原始頁面返回，請使用assign() 方法。
語法
window.location.assign ( "url" );
示例
在下面的示例中，我們使用了window.location.assign() 方法重定向到 tutorials point 的首頁
<html>
<head>
<title>Example - Redirecting web page with JavaScript</title>
</head>
<body>
<h2>Redirecting web page with JavaScript</h2>
<p>Click the following button, to get redirected using the window assign() function.</p>
<input type="button" value="Redirect Me" title="Redirect" onclick="Redirect()">
<script>
function Redirect() {
window.location.assign("https://tutorialspoint.tw");
}
</script>
</body>
</html>點選按鈕後，使用者可以看到網頁已重定向，並且可以透過按下後退按鈕返回到原始頁面，這與replace() 方法不同，在replace() 方法中我們無法使用後退按鈕返回到上一頁。
結論
在本文中，我們使用了三種最常見和最高效的方法，使用原生 JavaScript 將使用者重定向到不同的網頁。所有方法都能正常工作，但應根據使用者的需求使用。本文未介紹一些額外的方法，例如window.navigate()，因為它們是特定於某些 Web 瀏覽器的，因此這些方法在其他 Web 瀏覽器中可能無法正常執行。
4K+ 次瀏覽
