题 从HTML页面重定向


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


1357
2018-03-23 20:58


起源


为了遵循现代Web标准并提供跨浏览器功能,我更喜欢使用此高级功能 重定向生成器 - Patartics Milán
使用.htaccess或IIS等效执行服务器端重定向。这样,即使您的物理页面消失,重定向仍然有效。 - flith
insider.zone/tools/client-side-url-redirect-generator 是一个很好的小工具,可确保兼容性。 - mackycheese21


答案:


尝试使用:

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

注意:将其放在头部。

此外,对于较旧的浏览器,如果您添加快速链接,以防它无法正确刷新:

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

将显示为

重定向

这仍然允许您通过额外点击到达您要去的地方。


1934
2018-03-23 21:00



万维网联盟(W3C)不鼓励使用元刷新。参考: en.wikipedia.org/wiki/Meta_refresh。因此建议使用服务器重定向。 JavaScript重定向可能无法在所有手机上运行,​​因为JavaScript可能会被禁用。 - NinethSense
仅供参考 0 表示在0秒后刷新。您可能希望给用户更多时间来了解正在发生的事情。 - Dennis
@Paul Draper,取决于您正在运行的服务器 - Gal Margalit
我添加了标签闭包以遵守XHTML5规范。 - ZenLulz
@ NinethSense的评论使元刷新看起来像JavaScript重定向。元刷新是 不 JS并且在禁用JS时仍然可以工作。 - Druska


我会两个都用 ,和 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 状态代码。这很容易做到 .htaccess 文件使用 阿帕奇,或通过众多插件使用 WordPress的。我相信所有主要内容管理系统都有插件。此外,如果您的服务器上安装了重定向,则cPanel可以非常轻松地配置301重定向。


1009
2018-03-23 21:04



使用HTML5,此重定向页面可以更加简洁: pastebin.com/2qmfUZMk  (适用于所有浏览器,并通过w3c验证) - enyo
@enyo我不是放弃这个的忠实粉丝 body 标签等。也许它可以验证,也许可以在常见的浏览器中使用。我确信有一些边缘情况会导致问题,而且好处似乎很小。 - Billy Moon
@Fricker因为他们可能没有点击。他们可能通过语音控制,窃听或以某种未知的方式导航。这是一个遵循控件标准的辅助功能指南,例如使用链接的标准HTML A属性,并考虑它,并将其作为链接进行通信,而不是规定某人必须如何与其进行交互。还有,有 click here 不建议在链接上,因为屏幕阅读器将难以导航。链接应该在描述目的地的文本上,因此用户知道它们在跟随它之前会到达的位置,然而它们会与之交互。 - Billy Moon
@BillyMoon,实际上“点击”的含义已经超载,包括所有这些含义。 “点击”会很好。 - Pacerier
@BillyMoon在偶尔的情况下浏览器忽略0值元刷新?谢谢! - Gal Margalit


JavaScript的

<script language="javascript">
    window.location.href = "http://example.com"
</script>

元标记

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

110
2018-03-23 21:01





我会  添加规范链接以帮助您 SEO 人:

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

40
2018-02-06 00:34



除了重定向之外,您还会使用规范链接吗? en.wikipedia.org/wiki/Canonical_link_element 说Google更喜欢使用重定向 代替 规范链接。 - LarsH
@larsH那么SEO最重要的是重定向链接还是最终目标页面? - Chakotay


放置在头部内部的以下元标记将告诉浏览器重定向:

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

将秒替换为重定向前等待的秒数,并将URL替换为您希望其重定向到的URL。

或者,您可以使用JavaScript重定向。将其放在页面上任何位置的脚本标记内:

window.location = "URL"

27
2018-03-23 21:01





这是以前每个答案的总结,再加上使用HTTP刷新标头通过.htaccess的附加解决方案

1. HTTP刷新标头

首先,您可以使用.htaccess来设置这样的刷新标头

Header set Refresh "3"

这是使用的“静态”等价物 header() 功能 PHP

header("refresh: 3;");

请注意,每个浏览器都不支持此解决方案。

2. JavaScript

随着替补 网址

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

没有备用网址:

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

通过jQuery:

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

3. Meta Refresh

当不需要依赖JavaScript和重定向标头时,您可以使用元刷新

使用备用网址:

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

没有备用网址:

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

运用 <noscript>

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

可选

根据Billy Moon的建议,如果出现问题,您可以提供刷新链接:

如果您未自动重定向: <a href='http://example.com/alternat_url.html'>Click here</a>

资源


27
2017-11-06 10:19



您的“Via jQuery”示例不使用任何jQuery。 - Justin Johnson
不要打电话 setTimeout 用一根绳子。通过功能代替。 - Oriol
“HTTP刷新标题通过.htaccess” - 为什么询问有关从HTML页面重定向的问题? - Mateusz Konieczny


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


26
2018-02-21 15:18



给定的文章链接不再有效。搬到这里: support.google.com/webmasters/bin/... - Buggieboy
这个问题特别要求一个基本的.html页面。我想asker不能修改.htaccess或类似的(例如使用Github Pages或类似的有限主机)。在这种情况下,301是不可行的 - Nicolas Raoul
Ahaha @Buggieboy好笑! The article about redirect has not be redirected... sorry for the inconvenience ;) - Pierre Ozoux
链接工作!重定向它非常重要,以确保您重定向最好处理SEO组件。 - Mike