从HTML页面重定向

1577

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

html  redirect  xhtml  meta  html-head 
— bo
source
28
为了遵循现代Web标准并提供跨浏览器功能，我更喜欢使用此高级重定向生成器
— PatarticsMilán2015年
1
使用.htaccess或等效的IIS进行服务器端重定向。这样，即使您的物理页面消失了，重定向仍将起作用。
— flith
1
insider.zone/tools/client-side-url-redirect-generator是一个不错的小工具，可确保兼容性。
— mackycheese21 '18
2
该insider.zone工具使我的重定向全部变为小写，从而导致404错误。另外，也没有办法联系制作此页面的人。
— Dan Jacobson

Answers:

2150

尝试使用：

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

注意：将其放在头部。

另外，对于较旧的浏览器，如果添加了快速链接以防刷新不正确，请执行以下操作：

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

将显示为

重新导向

仍然可以通过单击几下到达目的地。

— 瓦列里
source
151
万维网联盟（W3C）不鼓励使用元刷新。参考：en.wikipedia.org/wiki/Meta_refresh。因此建议改用服务器重定向。由于可能禁用了JavaScript，因此JavaScript重定向可能无法在所有手机上正常工作。
— NinethSense
61
仅供参考，0表示在0秒后刷新。您可能需要给用户更多的时间来了解正在发生的事情。
— 丹尼斯
5
@Paul Draper，这取决于您正在运行的服务器
— Gal Margalit
9
我添加了标记闭合以遵守XHTML5规范。
— ZenLulz 2013年
98
@NinethSense的注释使元刷新看起来像JavaScript重定向。元刷新不是 JS，并且在禁用JS后仍然可以使用。
— 德鲁什卡
1104

我将同时使用meta和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使用Apache的文件或使用WordPress的众多插件，这很容易做到。我确信所有主要的内容管理系统也都有插件。另外，如果您的服务器上安装了301重定向，则cPanel的配置非常简单。

— 比利·月亮
source
12
此重定向页面可以使用HTML5更加简洁：pastebin.com/2qmfUZMk （可在所有浏览器中使用，并通过w3c验证）
— 恩约
9
@enyo我不是删除body标签之类的忠实粉丝。也许可以验证，并且可以在常见的浏览器中运行。我确信在某些情况下会引起问题，并且收益似乎很小。
— 比利·穆恩
9
@Fricker，因为他们可能没有点击。他们可能通过语音，点击或以某种未知的方式进行导航进行控制。这是可访问性指南，它遵循控件标准，例如使用标准HTML A属性作为链接，并进行思考，并将其作为链接进行通信，而不是规定某人必须如何与之交互。同样，click here不建议使用链接，因为屏幕阅读器将更难以导航。链接应位于描述目的地的文本上，以便用户在跟随目的地之前就知道他们将到达的位置，但是它们会与之交互。
— 比利·穆恩
2
@BillyMoon，实际上，“ click”的含义已经被重载以包括所有这些含义。“单击”会很好。
— Pacerier，2014年
2
@BillyMoon在什么情况下浏览器会忽略0值元刷新？谢谢！
— Gal Margalit 2015年
125

的JavaScript

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

元标记

<meta http-equiv="refresh" content="0;url=http://example.com">
— 阿米特克
source
39

我还将添加一个规范链接来帮助您的SEO人员：

<link rel="canonical" href="http://www.example.com/product.php?item=swedish-fish"/>
— rk
source
3
除了重定向之外，您还会使用规范链接吗？en.wikipedia.org/wiki/Canonical_link_element表示Google更喜欢使用重定向而不是规范链接。
— LarsH 2013年
1
@larsH那么对SEO最重要的是重定向链接还是最终目标页面？
— Chakotay 2014年
— Marc.2377
28

下面的meta标签位于头部之间，将告诉浏览器重定向：

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

将秒数替换为重定向之前要等待的秒数，然后将URL替换为您要重定向到的URL。

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

window.location = "URL"
— 彼得·奥尔森
source
28

这是以前所有答案的总结，以及通过.htaccess使用HTTP Refresh Header的其他解决方案

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.元刷新

当不需要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>

资源资源

— 拉法萨希
source
12
您的“通过jQuery”示例不使用任何jQuery。
— 贾斯汀·约翰逊
2
不要setTimeout用字符串调用。而是传递一个函数。
— Oriol
“通过.htaccess的HTTP刷新标题”-为什么它与从HTML页面重定向有关的问题相关？
— 减少活动
26

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

— 亚历克斯·K
source
13
该问题专门要求提供基本的.html页面。我想问问者不能修改.htaccess或类似内容（例如，使用Github Pages或类似的受限托管）。301在这种情况下不可行
— Nicolas Raoul
26

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

为了支持禁用JavaScript的浏览器，将HTML元重定向行添加到noscript元素。该noscript嵌套元重定向与合并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 -->
— 米兰爱国者
source
2
w3.org/TR/WCAG10-HTML-TECHS/#meta-element包含有关<meta http-equiv="refresh"W3C不推荐使用的原因的详细信息。
— daxelrod '16
w3c针对HTML重定向提供的参数也适用于Javascript重定向。此外，与HTML重定向相比，Javascript重定向需要启用javascript。因此，在可以同时使用HTML重定向和HTML重定向的情况下，它们绝对比Java重定向更好。
— 最大
17

您可以使用META “重定向”：

<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，如果您可以选择的话。

— 捷克学
source
5
mod_rewrite（仅）适用于Apache。
— Paul Draper 2014年
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>
— kk
source
10

将以下代码放在HTML代码的<HEAD>和</ HEAD>标记之间：

<meta HTTP-EQUIV="REFRESH" content="0; url=http://example.com/index.html">

上面的HTML重定向代码会将您的访问者立即重定向到另一个网页。将content="0;可以改变你想要的浏览器重定向之前等待的秒数。

— 穆罕默德·萨奇布（Muhammad Saqib）
source
9

将以下代码放在<head>部分中：

<meta http-equiv="refresh" content="0; url=http://address/">
— 塞比
source
9

我在使用jQuery Mobile应用程序时发现了一个问题，在某些情况下，我的Meta标头标记无法正确实现重定向（jQuery Mobile不会自动为每个页面读取标头，因此除非将JavaScript包装在其中，否则将JavaScript置于无效状态复杂）。我发现在这种情况下，最简单的解决方案是将JavaScript重定向直接放入文档正文中，如下所示：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="refresh" content="0;url=myURL" />
    </head>

    <body>
        <p>You are not logged in!</p>
        <script language="javascript">
            window.location = "myURL";
        </script>
    </body>
</html>

这似乎在每种情况下都对我有效。

— 苏格兰人
source
8

适用于所有类型页面的简单方法是meta在头部添加标签：

<html>
    <head>
        ...
        <meta HTTP-EQUIV="REFRESH" content="seconds; url=your.full.url/path/filename">
        ...
    </head>
    <body>
        Don't put much content, just some text and an anchor.
        Actually, you will be redirected in N seconds (as specified in content attribute).
        That's all.
        ...
    </body>
</html>
— 班纳吉
source
7

您应该使用JavaScript。将以下代码放在head标签中：

<script type="text/javascript">
 window.location.assign("http://www.example.com")
</script>
— kriscross07
source
7

您可以通过HTTP状态代码301或302自动重定向。

对于PHP：

<?php
    Header("HTTP/1.1 301 Moved Permanently");
    Header("Location: http://www.redirect-url.com");
?>
— VôVị
source
6
那不是从HTML页面重定向。
— bugmenot123
7

我使用一个脚本将用户从index.html重定向到登录页面的相对 URL

<html>
  <head>
    <title>index.html</title>
  </head>
  <body onload="document.getElementById('lnkhome').click();">
    <a href="/Pages/Login.aspx" id="lnkhome">Go to Login Page<a>
  </body>
</html>
— 佐尔法加里
source
1
上面方法中的重定向URL可以是相对的。例如：您想通过网站根目录中的index.html重定向到登录页面或任何相关页面。不需要知道您的域名。但是当您设置window.location.href =“ xxx”; 您必须知道域名。
— Zolfaghari
6

只是为了好措施：

<?php
header("Location: example@example.com", TRUE, 303);
exit;
?>

确保脚本上方没有回声，否则它将被忽略。 http://php.net/manual/zh/function.header.php

— 爱德华
source
9
该问题专门要求提供基本的.html页面。我想问问者不能修改.htaccess或类似内容（例如，使用Github Pages或类似的受限托管）。在这种情况下，PHP不可用。
— Nicolas Raoul
我认为PHP（超文本处理器）生成的内容是“基本HTML页面”。问题中没有任何地方提到文件类型。
— 爱德华
6

只需使用body标签的onload事件：

<body onload="window.location = 'http://example.com/'">
— 帕特·卡波齐
source
5 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Redirect to a page</title>
    </head>
    <body onload="window.location.assign('http://example.com')">

    </body>
</html>
— PoM
source
4

您不需要任何JavaScript代码。将其写在<head>HTML页面的部分中：

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

页面在0秒加载后，即可转到页面。

— 亚什·贾恩（Yash Jain）
source
1
接受的答案和热门评论中已经涵盖了这一点-考虑发布答案，而不是发布重复的答案
— RozzA，2016年
3

据我了解，到目前为止，针对该问题我所看到的所有方法似乎都将旧的位置添加到历史中。要重定向页面，但在历史记录中没有旧位置，我使用以下replace方法：

<script>
    window.location.replace("http://example.com");
</script>
— 保罗·奥吉维
source
2

这是一个重定向解决方案，提供了我想要的所有内容，但找不到用于剪切和粘贴的漂亮干净的代码段。

此代码段具有许多优点：

  • 可让您捕获并保留人们URL上的任何查询字符串参数
  • 使链接不再混乱以避免不必要的缓存
  • 可让您通知用户旧站点名称和新站点名称
  • 显示可设置的倒计时
  • 可以用于深层链接重定向，因为保留了参数

如何使用：

如果迁移了整个站点，则在旧服务器上停止原始站点，并使用此文件作为根文件夹中的默认index.html文件创建另一个站点。编辑网站设置，以便将任何404错误重定向到此index.html页。这会捕获到访问旧站点并带有指向子页面等的链接的任何人。

现在转到开始脚本标记，并编辑oldsite和newSite网站地址，并根据需要更改秒数。

保存并启动您的网站。工作完成-喝咖啡的时间。

<!DOCTYPE html>
<html>
<head>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">
<style>
body { margin: 200px; font: 12pt helvetica; }
</style>

</head>
<body>

</body>
<script type="text/javascript">

// Edit these to suit your needs.
var oldsite = 'http://theoldsitename.com'
var newSite = "https://thenewsitename.com";
var seconds = 20;  // countdown delay.

var path = location.pathname;
var srch = location.search;
var uniq = Math.floor((Math.random() * 10000) + 1);
var newPath = newSite + path + (srch === '' ? "?" + uniq : srch + "&" + uniq); 


document.write ('<p>As part of hosting improvements, the system has been migrated from ' + oldsite + ' to</p>');
document.write ('<p><a href="' + newPath + '">' + newSite + '</a></p>');
document.write ('<p>Please take note of the new website address.</p>');
document.write ('<p>If you are not automatically redirected please click the link above to proceed.</p>');
document.write ('<p id="dvCountDown">You will be redirected after <span id = "lblCount"></span>&nbsp;seconds.</p>');

function DelayRedirect() {
    var dvCountDown = document.getElementById("dvCountDown");
    var lblCount = document.getElementById("lblCount");
    dvCountDown.style.display = "block";
    lblCount.innerHTML = seconds;
    setInterval(function () {
        seconds--;
        lblCount.innerHTML = seconds;
        if (seconds == 0) {
            dvCountDown.style.display = "none";
            window.location = newPath;
        }
    }, 1000);
}
DelayRedirect()

</script>
</html>
展开摘要

— 战胜袋熊
source
1

<noscript>如果禁用了JS ，请使用JavaScript进行重定向。

<script>
    window.location.replace("https://google.com");
</script>

<noscript>
    <a href="https://google.com">Click here if you are not redirected automatically.</a>
</noscript>
— 雅利安·比扎杜尔（Aryan Beezadhur）
source
0

使用此代码：

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

请注意： 将其放在头标签中。

— 美洲A
source
我不知道为什么我的答案被否决两次？它工作正常
— AmerllicA'Aug
您发布的相同解决方案已经被多个用户发布。
— Rahul Shah
0

你可以用这个

<meta http-equiv="refresh" content="0; url=http://newpage.com/" />
展开摘要

— 卡帕佐
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.