从HTML页面重定向

cho*_*obo 1523 html meta xhtml html-head

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

Val*_*rij 2110

尝试使用:

<meta http-equiv="refresh" content="0; url=http://example.com/" />
Run Code Online (Sandbox Code Playgroud)

注意:将其放在头部.

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

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

将显示为

重定向

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

  • 万维网联盟(W3C)不鼓励使用元刷新.参考:http://en.wikipedia.org/wiki/Meta_refresh.因此建议使用服务器重定向.JavaScript重定向可能无法在所有手机上运行,​​因为JavaScript可能会被禁用. (149认同)
  • @ NinethSense的评论使元刷新看起来像JavaScript重定向.元刷新不是**JS,并且在禁用JS时仍然可以工作. (94认同)
  • 仅供参考,"0"表示在0秒后刷新.您可能希望为用户提供更多时间来了解正在发生的事情. (59认同)
  • 我添加了标签闭包以遵守XHTML5规范. (9认同)
  • @Paul Draper,取决于您正在运行的服务器 (5认同)
  • @NinethSense不鼓励刷新("因为意外的刷新会使用户迷失方向"),但问题是关于重定向. (3认同)
  • `url =`也可以是本地url(只是跳过'http://`)非常有用. (3认同)
  • Dennis - 我认为用户可以毫不拖延地更好地了解正在发生的事情 - 他们可能只是点击了一个链接或类似链接,所以正在发生的是它的加载.他们不必知道涉及重定向.我认为如果加载会更加混乱,然后会有延迟,然后会发生其他事情. (2认同)

Bil*_*oon 1085

我会使用metaJavaScript代码,并且会有一个链接以防万一.

<!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>
Run Code Online (Sandbox Code Playgroud)

为了完整起见,我认为最好的办法是尽可能使用服务器重定向,因此请发送301状态代码.这可以通过.htaccess使用Apache的文件或使用WordPress的众多插件轻松完成.我相信所有主要内容管理系统都有插件.此外,如果您的服务器上安装了重定向,则cPanel可以非常轻松地配置301重定向.

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

ami*_*t_g 121

JavaScript的

<script type="text/javascript">
    window.location.href = "http://example.com";
</script>
Run Code Online (Sandbox Code Playgroud)

元标记

<meta http-equiv="refresh" content="0;url=http://example.com">
Run Code Online (Sandbox Code Playgroud)


lrk*_*kwz 39

还会添加一个规范链接来帮助您的SEO人员:

<link rel="canonical" href="http://www.example.com/product.php?item=swedish-fish"/>
Run Code Online (Sandbox Code Playgroud)

  • 除了重定向之外,您还会使用规范链接吗?http://en.wikipedia.org/wiki/Canonical_link_element表示Google更喜欢使用重定向*而不是*规范链接. (3认同)

Raf*_*shi 28

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

1. HTTP刷新标头

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

Header set Refresh "3"
Run Code Online (Sandbox Code Playgroud)

这是header()PHP中使用该函数的"静态"等价物

header("refresh: 3;");
Run Code Online (Sandbox Code Playgroud)

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

2. JavaScript

使用备用网址:

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

没有备用网址:

<script>
    setTimeout("location.reload(true);",timeoutPeriod);
</script>
Run Code Online (Sandbox Code Playgroud)

通过jQuery:

<script>
    window.location.reload(true);
</script>
Run Code Online (Sandbox Code Playgroud)

3. Meta Refresh

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

使用备用网址:

<meta http-equiv="Refresh" content="3; url=http://example.com/alternate_url.html">
Run Code Online (Sandbox Code Playgroud)

没有备用网址:

<meta http-equiv="Refresh" content="3">
Run Code Online (Sandbox Code Playgroud)

使用<noscript>:

<noscript>
    <meta http-equiv="refresh" content="3" />
</noscript>
Run Code Online (Sandbox Code Playgroud)

可选

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

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

资源

  • 您的"Via jQuery"示例不使用任何jQuery. (12认同)
  • 不要用字符串调用`setTimeout`。而是传递一个函数。 (2认同)

Pet*_*son 27

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

<meta http-equiv="Refresh" content="seconds; url=URL"> 
Run Code Online (Sandbox Code Playgroud)

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

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

window.location = "URL"
Run Code Online (Sandbox Code Playgroud)


Ale*_*x K 26

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

  • 这个问题特别要求一个基本的.html页面.我想asker不能修改.htaccess或类似的(例如使用Github Pages或类似的有限主机).在这种情况下,301是不可行的 (13认同)

Pat*_*lán 25

如果您期待遵循现代Web标准,则应避免使用纯HTML元重定向.如果无法创建服务器端代码,则应选择JavaScript重定向.

要支持禁用JavaScript的浏览器,请向noscript元素添加HTML元重定向行.该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 -->
Run Code Online (Sandbox Code Playgroud)

  • w3c 针对 HTML 重定向提供的参数也适用于 Javascript 重定向。此外,与 HTML 重定向相比,Javascript 重定向需要启用 JavaScript。因此,在可以同时使用两者的情况下,HTML 重定向绝对优于 Javascript 重定向。 (4认同)
  • https://www.w3.org/TR/WCAG10-HTML-TECHS/#meta-element包含为什么W3C不推荐使用`<meta http-equiv ="refresh"`的详细信息. (2认同)

Cze*_*ogy 17

您可以使用META "重定向":

<meta http-equiv="refresh" content="0; url=http://new.example.com/address" />
Run Code Online (Sandbox Code Playgroud)

JavaScript重定向(请注意,并非所有用户都启用了JavaScript,因此请始终为他们准备备份解决方案)

<script language="javascript">
  window.location = "http://new.example.com/address";
</script>
Run Code Online (Sandbox Code Playgroud)

但如果你有选择,我宁愿推荐使用mod_rewrite.

  • mod_rewrite(仅)适用于Apache. (5认同)

kkk*_*kkk 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>
Run Code Online (Sandbox Code Playgroud)


Muh*_*qib 10

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

<meta HTTP-EQUIV="REFRESH" content="0; url=http://example.com/index.html">
Run Code Online (Sandbox Code Playgroud)

上述HTML重定向代码会立即将访问者重定向到其他网页.将content="0;可以改变你想要的浏览器重定向之前等待的秒数.


Seb*_*ebi 9

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

<meta http-equiv="refresh" content="0; url=http://address/">
Run Code Online (Sandbox Code Playgroud)


小智 9

我在使用jQuery Mobile应用程序时发现了一个问题,在某些情况下,我的Meta标头标签无法正确实现重定向(jQuery Mobile不会自动为每个页面读取标题,因此将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>
Run Code Online (Sandbox Code Playgroud)

这似乎适用于我的每一种情况.


P. *_*JEE 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>
Run Code Online (Sandbox Code Playgroud)


kri*_*s07 7

你应该使用JavaScript.将以下代码放在head标签中:

<script type="text/javascript">
 window.location.assign("http://www.example.com")
</script>
Run Code Online (Sandbox Code Playgroud)


小智 7

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

对于PHP:

<?php
    Header("HTTP/1.1 301 Moved Permanently");
    Header("Location: http://www.redirect-url.com");
?>
Run Code Online (Sandbox Code Playgroud)

  • 这不是HTML页面的重定向. (6认同)

Edw*_*ard 6

只是为了好的措施:

<?php
header("Location: example@example.com", TRUE, 303);
exit;
?>
Run Code Online (Sandbox Code Playgroud)

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

  • 这个问题特别要求一个基本的.html页面.我想asker不能修改.htaccess或类似的(例如使用Github Pages或类似的有限主机).在这种情况下,PHP不可用. (9认同)
  • 哎呀。为什么状态为 303?我以前从未见过这样的情况。无论如何,您为什么要重定向到电子邮件地址(无效的 URL)? (2认同)

Zol*_*ari 6

我使用一个脚本将用户从index.html重定向到Login Page

<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>
Run Code Online (Sandbox Code Playgroud)


pat*_*zzi 6

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

<body onload="window.location = 'http://example.com/'">
Run Code Online (Sandbox Code Playgroud)

  • 请注意,这仅在启用 JavaScript 的情况下才有效,如果您需要支持没有 JavaScript 的客户端,请使用“meta”标记方法 (2认同)

Jos*_*980 5

剃刀引擎延迟5秒:

<meta http-equiv="Refresh"
         content="5; url=@Url.Action("Search", "Home", new { id = @Model.UniqueKey }))">
Run Code Online (Sandbox Code Playgroud)


小智 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>
Run Code Online (Sandbox Code Playgroud)


Pau*_*vie 5

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

<script>
    window.location.replace("http://example.com");
</script>
Run Code Online (Sandbox Code Playgroud)