如何使用 JavaScript 在 5 秒后重定向网页?
在本教程中,我们将学习使用 JavaScript 在 5 秒后重定向网页。要在 5 秒后重定向网页,请使用 setInterval() 方法设置时间间隔。在window.location.href 对象中添加网页。
众所周知,每当我们需要在特定延迟时间后调用函数或某些代码块时,我们都会使用 JavaScript 的 setTimeout() 和 setInterval() 方法。让我们看看如何使用这些方法在 5 秒内重定向网页。
要重定向页面,我们将使用 JavaScript 的 document.location.href 或 window.location.href 对象,如下所示 −
document.location.href=""; 或 window.location.href="";
让我们逐一详细了解 setTimeout() 和 setInterval() 方法与 document.location.href 对象的用法,以将网页重定向延迟 5 秒。
使用 setTimeout() 方法
我们将像往常一样使用 setTimeout() 方法,为其提供一个回调函数,并指定一个特定的时间限制,在此时间之后它将调用回调函数,从而重定向网页。
语法
以下语法将用于实现 setTimeout() 方法与 document.location.href 对象 -
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://www.tutorialspoint.com/index.htm'; } </script> </body> </html>
上述示例将在点击按钮 5 秒后将网页重定向到 tutorialspoint.com 的官方页面,这是由于上述代码中 document.location.href 对象使用的 setTimeout() 方法而发生的。
使用 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://www.tutorialspoint.com/index.htm'; clearInterval(interval); } </script> </body> </html>
在上面的例子中,我们在 redirect() 函数中使用了 setInterval() 方法,该方法将在用户单击按钮时触发,其中 setInterval() 将在 5 秒后调用其回调函数并将页面重定向到 document.location.href 对象中给定的 URL,然后它将清除间隔,以便它不会再次调用该函数并重复重定向到同一页面。
在本教程中,我们已经了解了如何使用 setTimeout() 和 setInterval() 方法与 document.location.href 对象在 5 秒后重定向网页。我们通过实际实施这两种方法并借助代码示例进行了讨论,以便更好地理解它们的工作原理。