資料結構
網路
關係資料庫管理系統 (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>執行上述程式碼後，使用者可以觀察到頁面是如何從瀏覽器快取中載入的，並且沒有向伺服器傳送請求來透過更改 href 屬性載入新頁面（前提是使用者瀏覽器快取中存在舊版本的頁面）。
使用 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+ 次瀏覽
