如何在页面加载时将一个HTML页面重定向到另一个页面

Question

如何在页面加载时将一个HTML页面重定向到另一个页面

htmlredirectmeta

1824

在加载页面时，是否可以设置一个基本的HTML页面以重定向到另一个页面？

- chobo

2

使用.htaccess或IIS等同工具进行服务器端重定向。这样，即使您的物理页面消失，重定向仍将起作用。 - flith

4

那个 insider.zone 工具把我的重定向链接都变成了小写字母，导致出现了404错误页面。另外，也没有办法联系到制作这个页面的人。 - Dan Jacobson

24个回答

1211

我会同时使用元标签和JavaScript代码，并提供一个链接以备不时之需。

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="refresh" content="0; url=http://example.com">
        <script type="text/javascript">
            window.location.href = "http://example.com"
        </script>
        <title>Page Redirection</title>
    </head>
    <body>
        <!-- Note: don't tell people to `click` the link, just tell them that it is a link. -->
        If you are not redirected automatically, follow this <a href='http://example.com'>link to example</a>.
    </body>
</html>

为了完整性，如果可能的话，我认为最好的方法是使用服务器重定向，发送301状态代码。这可以通过使用Apache的.htaccess文件轻松完成，或者使用WordPress的众多插件完成。我相信对于所有主要内容管理系统也都有插件可用。此外，如果您在服务器上安装了cPanel，则非常容易配置301重定向。

- Billy Moon

17

这个重定向页面可以用HTML5更简洁：http://pastebin.com/2qmfUZMk（适用于所有浏览器，通过w3c验证）。 - enyo

15

我不太喜欢省略body标签等。虽然可能符合验证要求，在常见浏览器中也可以正常运行，但我相信在某些特殊情况下它可能会引发问题，而且好处似乎并不大。 - Billy Moon

13

@Fricker 因为他们可能不会点击。他们可能会通过语音控制、敲击或以某种未知的方式进行导航。遵循控件的标准是一项无障碍指南，例如使用标准 HTML 的 A 属性来表示链接，并将其视为链接，并不指定某人必须如何与其交互。此外，在链接上添加“点击此处”不是明智的做法，因为屏幕阅读器将更难以导航。链接应该在描述目的地的文本上，这样用户在跟随链接之前就知道他们将到达的位置，无论他们如何与它交互。 - Billy Moon

2

@BillyMoon，实际上，“click”的含义已经被过度使用，包括所有这些含义。 “click”就可以了。 - Pacerier

2

@BillyMoon 在什么情况下浏览器会忽略值为0的meta refresh？谢谢！ - Gal Margalit

显示剩余13条评论

151

JavaScript

<script type="text/javascript">
    window.location.href = "http://example.com";
</script>

元标签

<meta http-equiv="refresh" content="0;url=http://example.com">

- amit_g

在 Angular 应用程序中，似乎无法为 HTML 页面工作。有没有办法修复它？ - RedBottleSanitizer

43

我还会添加一个canonical链接来帮助你的SEO人员：

<link rel="canonical" href="http://www.example.com/product.php?item=swedish-fish"/>

- lrkwz

4

除了重定向之外，您还需要使用规范链接吗？根据http://en.wikipedia.org/wiki/Canonical_link_element的说法，Google更喜欢使用重定向而不是规范链接。 - LarsH

1

@larsH 那么对于SEO来说最重要的是什么，是重定向链接还是最终目标页面？ - Lexus de Vinco

1

@Chakotay 请参考：何时应选择规范化链接（Canonical）和301重定向？ - Marc.2377

如果重定向是因为有人试图访问超出根操作范围的文件，例如包含文件或以非法方式访问的文件，则页面重定向很可能已经超出了谷歌访问的范围。虽然我知道并不是所有机器人都尊重robots.txt文件。这只是一个想法。 - Ernest Allen Buffington

37

这是对之前所有答案的总结，另外提供一种使用HTTP刷新头部的解决方案，通过.htaccess文件实现。

HTTP刷新头部

首先，可以使用.htaccess文件设置一个刷新头部，如下所示：
```
Header set Refresh "3"
```
这是在PHP中使用header()函数的“静态”等效方式。
```
header("refresh: 3;");
```
请注意，这种解决方案并非所有浏览器都支持。
JavaScript
使用替代的URL：

<script>
    setTimeout(function(){location.href="http://example.com/alternate_url.html"} , 3000);
</script>

没有备用网址：

<script>
    setTimeout("location.reload(true);",timeoutPeriod);
</script>

使用window对象：

<script>
    window.location.reload(true);
 </script>

元重定向

如果不想依赖JavaScript和重定向头，则可以使用元重定向

使用备用URL：

<meta http-equiv="Refresh" content="3; url=http://example.com/alternate_url.html">

没有备用 URL：

<meta http-equiv="Refresh" content="3">

使用<noscript>标签：

<noscript>
    <meta http-equiv="refresh" content="3" />
</noscript>

可选项

根据Billy Moon的建议，您可以提供一个刷新链接以防出现问题：

If you are not redirected automatically: <a href='http://example.com/alternat_url.html'>Click here</a>

资源

- RafaSashi

3

不要使用字符串调用 setTimeout，应该传递一个函数作为参数。 - Oriol

“HTTP Refresh Header via .htaccess” - 为什么在询问HTML页面重定向的问题时相关？ - reducing activity

1

如果您可以从HTTP头（例如在.htaccess中）进行重定向，则应使用301或302重定向，而不是刷新。 - Simon East

30

以下的meta标签放在head标签内，会告诉浏览器进行重定向：

<meta http-equiv="Refresh" content="seconds; url=URL">

将秒数替换为重定向前等待的秒数，并将URL替换为要重定向到的URL。

或者，您可以使用JavaScript进行重定向。将其放置在页面的任何位置的script标签中：

window.location = "URL"

- Peter Olson

30

如果您希望遵循现代Web标准，应避免使用纯HTML meta重定向。如果您无法创建服务器端代码，则应选择JavaScript重定向。

为了支持禁用JavaScript的浏览器，请将HTML meta重定向行添加到noscript元素中。noscript嵌套的meta重定向与canonical标记结合使用，还可帮助提高搜索引擎排名。

如果您想要避免重定向循环，应使用location.replace() JavaScript函数。

一个正确的客户端URL重定向代码应该长这样（包括Internet Explorer 8及以下版本的修复，并且没有延迟）:

<!-- Pleace this snippet right after opening the head tag to make it work properly -->

<!-- This code is licensed under GNU GPL v3 -->
<!-- You are allowed to freely copy, distribute and use this code, but removing author credit is strictly prohibited -->
<!-- Generated by http://insider.zone/tools/client-side-url-redirect-generator/ -->

<!-- REDIRECTING STARTS -->
<link rel="canonical" href="https://stackoverflow.com/"/>
<noscript>
    <meta http-equiv="refresh" content="0; URL=https://stackoverflow.com/">
</noscript>
<!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]-->
<script type="text/javascript">
    var url = "https://stackoverflow.com/";
    if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
    {
        document.write("redirecting..."); // Don't remove this line or appendChild() will fail because it is called before document.onload to make the redirect as fast as possible. Nobody will see this text, it is only a tech fix.
        var referLink = document.createElement("a");
        referLink.href = url;
        document.body.appendChild(referLink);
        referLink.click();
    }
    else { window.location.replace(url); } // All other browsers
</script>
<!-- Credit goes to http://insider.zone/ -->
<!-- REDIRECTING ENDS -->

- Patartics Milán

3

https://www.w3.org/TR/WCAG10-HTML-TECHS/#meta-element 包含了关于为什么W3C已经弃用<meta http-equiv="refresh"的详细信息。 - daxelrod

4

W3C反对HTML重定向的论点同样适用于Javascript重定向。此外，与HTML重定向不同，Javascript重定向需要启用javascript才能使用。因此，在可以使用两者的情况下，HTML重定向严格优于Javascript重定向。 - Max

@Max. 是的，没错。w3c 表示，“但是，用户不应使用此标记重定向用户，因为它是非标准的，会让用户感到迷失，并可能破坏浏览器对已访问页面的历史记录。”这现在已经成为事实上的标准，因此如果正确考虑到可用性问题，应该使用它。 - Josiah Yoder

@Max 当然，可用性问题与元数据或JavaScript等同，正如你所说的那样。如果使用零超时，则没有区别。 - Josiah Yoder

27

最好设置一个301重定向。请参阅Google的网站管理员工具文章301重定向。

- Alex K

18

这个问题特别要求一个基本的 .html 页面。我猜问问题的人不能修改 .htaccess 或类似文件（比如使用 Github Pages 或其他受限制的主机）。在这种情况下，无法使用301重定向。 - Nicolas Raoul

18

您可以使用 META “redirect”：

<meta http-equiv="refresh" content="0; url=http://new.example.com/address" />

或者JavaScript重定向（请注意，并非所有用户都启用了JavaScript，因此始终为他们准备备选方案）

<script language="javascript">
  window.location = "http://new.example.com/address";
</script>

但如果您有这个选项，我更愿意推荐使用mod_rewrite。

- Czechnology

5

mod_rewrite（仅限）适用于Apache。 - Paul Draper

1

关于Apache：为什么要使用mod_rewrite而不是简单的Redirect指令，而且不需要额外的模块？ - vog

14

页面加载后，init函数会立即触发并重定向页面：

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <script>
            function init()
            {
               window.location.href = "www.wherever.com";
            }
        </script>
    </head>

    <body onload="init()">
    </body>
</html>

- kkk

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Valerij · Accepted Answer

2392

尝试使用以下代码：

<meta http-equiv="refresh" content="0; url=http://example.com/" />

注意：将其放置在 <head> 部分。

另外，对于旧版浏览器，如果您添加了一个快速链接以防止刷新不正确：

<p><a href="http://example.com/">Redirect</a></p>

将显示为

重定向

这仍将允许您使用额外的单击跳转到目标页面。

- Valerij

162

使用 meta refresh 标签被世界广泛网联盟（W3C）不推荐。参考：http://en.wikipedia.org/wiki/Meta_refresh。因此，建议使用服务器重定向。JavaScript 重定向可能无法在所有移动手机上工作，因为 JavaScript 可能会被禁用。 - NinethSense

71

FYI，“0”表示在0秒后刷新。您可能希望给用户更多时间了解正在发生的事情。 - Dennis

125

@NinethSense的评论让meta refresh看起来像JavaScript重定向。Meta refresh 不是 JavaScript，并且在禁用JavaScript时仍然有效。 - Druska

6

@NinethSense反对刷新（“因为意外的刷新可能会让用户感到迷失方向”），但问题是关于重定向的。 - Koen.

2

Dennis - 我认为用户不需要延迟就能更好地了解正在发生的事情 - 他们可能刚刚点击了一个链接或类似的东西，所以正在加载。他们不必知道重定向的涉及。我认为如果加载完成后出现延迟，然后发生其他事情，这会更加令人困惑。 - bdsl

显示剩余13条评论