如何在 HTML 页面中实现重定向？

页面重定向是指你点击一个 URL 想访问页面 X，但实际上却被导向了另一个页面 Y 的情况。这是由于页面重定向造成的。网站设计者在需要更改特定网站的布局或特定页面的位置时，会依赖重定向。

要从一个HTML 页面进行重定向，我们使用META 标签。同时，我们也使用http-equiv 属性来为content 属性的值提供一个HTTP 头。content 中的值是页面重定向前的等待秒数。

如果想立即加载，请将 content 属性设置为 0。否则，如果想稍微延迟重定向，则指定以秒为单位的时间。

语法

<meta http-equiv="refresh" content="time; URL=new_url" />

我们可以看到，重定向需要两个参数：

  • 时间：表示浏览器将用户重定向到其他页面之前的延迟。

  • 新 URL：表示延迟后我们需要将用户重定向到的 URL 地址。

以下是一些示例……

示例

在下面的示例中，我们通过在<meta> 标签中指定 URL 链接来将页面重定向到另一个页面。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Redirect</title>
   <meta http-equiv="refresh" content="5; url = https://tutorialspoint.com/index.htm" />
</head>
<body>
   <h1>WELCOME TO Tutorialspoint</h1>
   <p>you'll be redirected to Tutorialspoint Homepage, in 5 seconds.</p>
</body>
</html>

运行代码后，浏览器窗口打开并等待 5 秒钟，然后自动重定向到 tutorials point 首页。

延迟 HTML 页面的重定向

如果在重定向到另一个页面或延迟重定向页面时遇到任何错误，这可能是因为使用了旧的浏览器。为了解决这个问题，我们将添加一个指向网页的新链接。

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="refresh" content="5; URL=https://tutorialspoint.com/index.htm" />
</head>
<body>
   <p>If you are not redirected in five seconds, <a href="https://tutorialspoint.com/index.htm">click here</a>.</p>
</body>
</html>

执行上面的脚本后，网页会显示我们使用<a href>提到的链接，以避免重定向延迟。

更新于：2023年9月10日

31K+ 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告