ChatGPT解决这个技术问题 Extra ChatGPT

从 HTML 页面重定向

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

使用 .htaccess 或 IIS 等效项来执行服务器端重定向。这样,即使您的物理页面消失,重定向仍然有效。
该 insider.zone 工具使我的重定向全部小写,导致 404。另外,没有办法联系制作该页面的人。

D
David d C e Freitas

尝试使用:

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

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

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

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

将显示为

Redirect

这仍然可以让您通过额外的点击到达您要去的地方。


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

我会同时使用元代码和 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 通过大量插件来实现。我相信所有主要的内容管理系统也都有插件。此外,如果您在服务器上安装了 301 重定向,cPanel 的配置非常简单。


这个重定向页面可以使用 HTML5 更加简洁:pastebin.com/2qmfUZMk(适用于所有浏览器,并通过 w3c 验证)
@enyo 我不喜欢删除 body 标记等。也许它可以验证,也许可以在常见的浏览器中使用。我确信有一些边缘情况会导致问题,而且好处似乎很小。
@Fricker 因为他们可能没有点击。他们可能通过语音、点击或以某种未知方式导航进行控制。它是遵循控件标准的可访问性指南,例如使用标准 HTML A 属性进行链接,并将其视为链接,并将其作为链接进行通信,而不是规定某人必须如何与之交互。此外,不建议在链接上使用 click here,因为屏幕阅读器将更难导航。链接应该在描述目的地的文本上,以便用户在跟随它之前知道他们将到达哪里,并且他们与它进行交互。
@BillyMoon,实际上“点击”的含义已经被重载以包括所有这些含义。 “点击”就可以了。
@BillyMoon 在什么情况下浏览器会忽略 0 值元刷新?谢谢!
m
miike3459

JavaScript

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

元标记

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

似乎不适用于 Angular 应用程序中的 HTML 页面。有什么可以解决的吗?
P
Peter Mortensen

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

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

除了重定向之外,您还会使用规范链接吗? en.wikipedia.org/wiki/Canonical_link_element 表示 Google 更喜欢使用重定向而不是规范链接。
@larsH 那么对于 SEO 来说最重要的是重定向链接还是最终目标页面?
r
reducing activity

这是每个先前答案的总结,以及通过 .htaccess 使用 HTTP Refresh Header 的附加解决方案

1.HTTP刷新头

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

Header set Refresh "3"

这是在 PHP 中使用 header() 函数的“静态”等效项

header("refresh: 3;");

请注意,并非所有浏览器都支持此解决方案。

2. JavaScript

使用备用 URL

<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>

资源

维基百科元刷新

META REFRESH 的性能影响

使用 jQuery 刷新(重新加载)页面一次?


您的“通过 jQuery”示例不使用任何 jQuery。
不要使用字符串调用 setTimeout。而是传递一个函数。
“HTTP Refresh Header via .htaccess” - 为什么它与从 HTML 页面重定向有关的问题相关?
如果您可以从 HTTP 标头(例如在 .htaccess 中)进行重定向,那么您应该使用 301 或 302 重定向,而不是刷新。
P
Paul

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

要支持禁用 JavaScript 的浏览器,请将 HTML 元重定向行添加到 noscript 元素。 noscript 嵌套元重定向与 canonical 标记相结合也有助于您的搜索引擎排名。

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

正确的客户端 URL redirect 代码如下所示(使用 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 -->

w3.org/TR/WCAG10-HTML-TECHS/#meta-element 详细说明了 W3C 不推荐使用 <meta http-equiv="refresh" 的原因。
w3c 针对 HTML 重定向提供的参数也适用于 Javascript 重定向。此外,与 HTML 重定向相比,Javascript 重定向需要启用 javascript。因此,在两者都可以使用的情况下,HTML 重定向严格地优于 Javascript 重定向。
I
IS4

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

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

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

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

window.location = "URL"

R
RickyA

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


该问题专门要求一个基本的 .html 页面。我猜提问者不能修改 .htaccess 或类似的(例如使用 Github Pages 或类似的受限托管)。在这种情况下 301 是不可行的
K
Kamil Kisiel

您可以使用 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,如果你有选择的话。


mod_rewrite(仅)适用于 Apache。
关于 Apache:为什么是 mod_rewrite 而不是没有额外模块的简单重定向指令?
P
Peter Mortensen

页面加载后,立即触发 init 函数并重定向页面:

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

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

P
Peter Mortensen

将以下代码放在 HTML 代码的 和 标记之间:

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

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


P
Peter Mortensen

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

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

P
Peter Mortensen

我在使用 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>

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


p
parvus

适用于所有类型页面的简单方法是在头部添加一个 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>

F
Flexo

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

对于 PHP:

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

这不是来自 HTML 页面的重定向。
S
Sangwin Gawande

我使用脚本将用户从 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>

上述方法中的重定向 url 可以是相对的。例如:您想通过网站根目录中的 index.html 重定向到登录页面或任何相关页面。不需要知道你的域名。但是当你设置 window.location.href="xxx";你必须知道域名。
k
kriscross07

你应该使用 JavaScript。将以下代码放在您的头部标签中:

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

P
PoM
<!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>

P
Peter Mortensen

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

<body onload="window.location = 'http://example.com/'">

请注意,这仅在启用 javascript 时才有效,如果您需要没有 javascript 的支持客户端,请改用 meta 标记方法
P
Peter Mortensen

Razor engine 延迟 5 秒:

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

E
Edward

只是为了衡量:

<?php
header("Location: http://example.com", true, 302);
exit;
?>

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


该问题专门要求一个基本的 .html 页面。我猜提问者不能修改 .htaccess 或类似的(例如使用 Github Pages 或类似的受限托管)。在这种情况下,PHP 不可用。
我会将 PHP(预超文本处理器)生成的东西视为“基本 HTML 页面”。问题中没有任何地方提到文件类型。
哎呀。为什么是状态 303?我以前从未见过。无论如何,您为什么要重定向到电子邮件地址(无效的 URL)?
@SimonEast 不知道,我不记得把这些价值观放进去,即使那是 8 年前!反正修好了。
P
Peter Mortensen

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

<script>
    window.location.replace("http://example.com");
</script>

P
Peter Mortensen

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

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

页面在 0 秒加载后,您就可以转到您的页面。


这已经包含在接受的答案和热门评论中 - 考虑编辑答案而不是发布重复的答案
V
Vanquished Wombat

这是一个重定向解决方案,包含我想要的所有内容,但无法在干净的片段中找到剪切和粘贴。

这个片段有很多优点:

让您捕获并保留人们在其 url 上的任何查询字符串参数

使链接 unqiue 以避免不必要的缓存

让您通知用户新旧站点名称

显示可设置的倒计时

可用于深度链接重定向作为保留参数

如何使用:

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

现在转到开始脚本标签并编辑 oldsite 和 newSite 网址,并根据需要更改秒值。

保存并启动您的网站。工作完成 - 是时候喝杯咖啡了。


o
object-Object

你可以在javascript中做到这一点:

location = "url";