資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 JavaScript 在 5 秒後重定向網頁？
在本教程中，我們將學習如何使用 JavaScript 在 5 秒後重定向網頁。要實現 5 秒後重定向網頁，可以使用 setInterval() 方法設定時間間隔。將網頁地址新增到 window.location.href 物件中。
眾所周知，每當我們需要在特定時間延遲後呼叫函式或某些程式碼塊時，我們都會使用 JavaScript 的 setTimeout() 和 setInterval() 方法。讓我們看看如何使用這些方法在 5 秒後重定向網頁。
要重定向頁面，我們將使用 JavaScript 的 document.location.href 或 window.location.href 物件，如下所示：
document.location.href=""; OR window.location.href="";
讓我們詳細瞭解一下如何使用 setTimeout() 和 setInterval() 方法 以及 document.location.href 物件，以將網頁重定向延遲 5 秒。
使用 setTimeout() 方法
我們將像往常一樣使用 setTimeout() 方法，為其提供一個回撥函式，並指定一個特定時間限制，在此時間限制之後，它將呼叫回撥函式，該函式將重定向網頁。
語法
以下語法將用於實現帶有 document.location.href 物件的 setTimeout() 方法：
setTimeout(callBack_func, timeInterval);
function callBack_func() {
document.location.href = "";
}
讓我們瞭解一下 setTimeout() 方法 的程式碼實現，以在 5 秒後重定向頁面。
演算法
步驟 1 - 在第一步中，我們將為 HTML 文件中與按鈕標籤關聯的 onclick 事件定義一個回撥函式。
步驟 2 - 在這一步中，我們將呼叫 setTimeout() 方法，其中包含一個回撥函式和一個時間間隔，該時間間隔位於上一步中宣告的函式內部。
步驟 3 - 在最後一步中，我們將定義 setTimeout() 方法的回撥函式，該函式使用 document.location.href 物件在給定的時間間隔後重定向頁面。
示例
下面的程式碼示例將解釋如何使用 setTimeout() 方法將網頁重定向延遲 5 秒：
<!DOCTYPE html>
<html>
<body>
<h2>Using JavaScript to resirect a webpage after 5 seconds </h2>
<p id = "result"></p>
<button onclick = "redirect()">Click to Redirect to Tutorials Point</button>
<script>
function redirect () {
setTimeout(myURL, 5000);
var result = document.getElementById("result");
result.innerHTML = "<b> The page will redirect after delay of 5 seconds";
}
function myURL() {
document.location.href = 'https://tutorialspoint.tw/index.htm';
}
</script>
</body>
</html>
上面的示例將在單擊按鈕後 5 秒鐘將網頁重定向到 tutorialspoint.com 的官方頁面，這是因為在上面的程式碼中，setTimeout() 方法與 document.location.href 物件一起使用。
使用 setInterval() 方法
我們也可以使用 setInterval() 方法將網頁重定向延遲特定時間間隔。但是，將 setInterval() 方法用於此目的時，我們需要小心，因為它會重複呼叫作為回撥函式傳入的函式。我們可以使用 clearInterval() 方法阻止它重複呼叫函式。
語法
以下語法將使您瞭解如何使用 setInterval() 方法以及 clearInterval() 方法以及 document.location.href 物件：
var interval_name = setInterval(call_back, time_interval);
function call_back() {
document.location.href = "";
clearInterval(interval_name);
}
讓我們透過一個程式碼示例來實際瞭解一下如何使用 setInterval() 方法在 5 秒後重定向頁面。
演算法
上述示例和本示例的演算法幾乎相同，您只需要將上一個示例中的 setTimeout() 方法替換為 setInterval() 方法並將其儲存到一個變數中，然後您必須在 setInterval() 的回撥函式內使用 clearInterval() 方法以及傳遞給它的變數（其中儲存了 setInterval() 方法）。
示例
以下示例將說明 setInterval() 方法的使用，以及您需要在上一個示例的演算法中執行的更改：
<!DOCTYPE html>
<html>
<body>
<h2>Using JavaScript to redirect a webpage after 5 seconds</h2>
<p id="result"></p>
<button onclick="redirect()">Click to Redirect to Tutorials Point</button>
<script>
function redirect () {
var interval = setInterval(myURL, 5000);
var result = document.getElementById("result");
result.innerHTML = "<b> The page will redirect after delay of 5 seconds setInterval() method.";
}
function myURL() {
document.location.href = 'https://tutorialspoint.tw/index.htm';
clearInterval(interval);
}
</script>
</body>
</html>
在上面的示例中，我們在 redirect() 函式內使用了 setInterval() 方法，該方法將在使用者單擊按鈕後觸發，其中 setInterval() 將在 5 秒後呼叫其回撥函式並將頁面重定向到 document.location.href 物件中給定的 URL，然後它將清除間隔，以便它不會再次呼叫該函式並重復重定向到同一頁面。
在本教程中，我們已經瞭解瞭如何使用 setTimeout() 和 setInterval() 方法以及 document.location.href 物件在 5 秒後重定向網頁。我們已經透過實際實現程式碼示例來討論這兩種方法，以便更好地理解它們的工作原理。
39K+ 次瀏覽
