JavaScript 延迟后重定向页面

JavaScript 9月前 15

让我们详细了解如何在 JavaScript 延迟后重定向到另一个页面。

在 JavaScript 中使用 `setTimeout()` 方法在延迟后重定向页面

你有时希望在用户单击链接后在网页上显示一些内容，例如短信，然后再将用户重定向到另一个页面。锚标签是不能直接延迟重定向几秒钟然后转到另一个页面的。

为此，我们必须使用 setTimeout 方法。此方法添加延迟，然后将用户重定向到另一个页面。

但是仅仅使用 setTimeout 方法是行不通的。在使用 setTimeout 方法之前，你还必须阻止锚标记的默认行为。

JavaScript 中的 setTimeout() 方法允许你在一段时间后执行一段代码或一个函数。setTimeout() 函数有两个参数。

第一个参数是回调函数，第二个参数是要延迟代码执行的时间。

为了实现这一点，我们将首先创建两个网页，index.html 和 newpage.html。在 index.html 中，我们有一个标题文本的 h1 标签。

然后我们将有一个锚标签 a，它具有 link 和 href 属性的 id。

锚链接的 href 将是 # 并且不会指向任何地方。我们将在 JavaScript 中设置 href 链接。

锚标记也将包含文本重定向我。最后，我们将使用 script 标签链接 JavaScript 文件，如下所示。

// index.html
<body>
    <h1>Home Page</h1>
    <a id="link" href="#">Redirect me</a>

    <script src="./script.js">
    </script>
</body>

在 newpage.html 中，我们将有一个 h1 文本，如下所示。我们的目标是在点击锚链接后将用户从 index.html 页面重定向到 newpage.html。

// newpage.html
<body>
    <h1>Welcome to new page...</h1>
</body>

设置好我们的 HTML 代码之后，就该处理 JavaScript 代码了。我们将首先使用其 id 属性 link 在 JavaScript 中获取锚 HTML 元素，并将其存储在 url 变量中。

然后我们将使用 addEventListener() 方法在 url 变量上设置点击监听器。

在 click 事件监听器中，我们将首先在控制台上打印一条消息 url clicked...。这会让我们知道用户点击了链接。

然后我们将添加一个 setTimeout() 方法。

我们将在 3000 毫秒后执行该函数，即 3 秒后。我们将使用 window.location.href 属性在此方法中设置 URL。

成功重定向到新页面后，我们将在控制台上打印一条消息。

var url = document.getElementById('link');

url.addEventListener('click', ()=>{
    console.log("url clicked...")

    setTimeout(() =>{
        window.location.href = "http://127.0.0.1:5500/newpage.html";
        console.log("timeout executed...")
    }, 3000);
});

整个事情都在事件循环上工作。

setTimeout() 方法之前和之后的任何代码都将首先执行。完成代码执行后，它将开始执行 setTimeout 或 setInterval 方法。

要了解上述代码在内部是如何工作的，你必须了解 JavaScript 中的事件循环概念。

此时，如果你运行上面的代码，它现在就可以工作了。只要你单击该 URL，它就会立即将你重定向到我们不想要的下一页。

即使我们添加了 setTimeout() 方法，它也会立即切换到该链接而不会延迟。这是因为，默认情况下，每个 HTML 元素都有一些默认行为。

它的默认行为是单击锚链接后转到下一页。

在 JavaScript 中使用 `preventDefault()` 方法禁用 HTML 元素的默认行为

有时我们必须禁用 HTML 元素的这些默认行为。我们使用一种名为 preventDefault() 的方法来实现。

你必须将事件作为参数传递给你调用的函数。在这种情况下，我们将事件 e 传递给 click 事件，然后在该事件上，我们设置 preventDefault() 方法。

var url = document.getElementById('link');

url.addEventListener('click', (e)=>{
    e.preventDefault();

    console.log("url clicked...")

    setTimeout(() =>{
        window.location.href = "http://127.0.0.1:5500/newpage.html";
        console.log("timeout executed...")
    }, 5000);
});

如果你运行代码并单击链接，它将在 setTimeout() 方法中提到的时间延迟后将你带到下一页。

JavaScript 延迟后重定向页面

要在新标签页中打开 URL，你可以使用 window.open() 方法而不是 window.location.href()。在 window.open() 的第一个参数中，你可以传递 URL，在第二个参数中，你必须指定要打开链接的位置。

由于我们想在新标签页中打开延迟，我们将 _blank 传递给第二个参数。

window.open('http://127.0.0.1:5500/newpage.html', '_blank');

如果你运行代码，它将在新标签页中打开 URL。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布，任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供，仅供学习和研究使用。如您对本站的相关版权有任何异议，或者认为侵犯了您的合法权益，请及时通知我们处理。

JavaScript

在 JavaScript 中使用 setTimeout() 方法在延迟后重定向页面

在 JavaScript 中使用 preventDefault() 方法禁用 HTML 元素的默认行为

相关文章

在 JavaScript 中使用 `setTimeout()` 方法在延迟后重定向页面

在 JavaScript 中使用 `preventDefault()` 方法禁用 HTML 元素的默认行为