ChatGPT解决这个技术问题 Extra ChatGPT

Redirect from an HTML page

Is it possible to set up a basic HTML page to redirect to another page on load?

Use .htaccess or IIS equivalent to do a server-side redirect. That way, even if your physical page disappears, the redirect will still work.
That insider.zone tool made my redirects all lower case, causing 404s. Plus there is no way to contact whoever made the page about it.

D
David d C e Freitas

Try using:

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

Note: Place it in the <head> section.

Additionally for older browsers if you add a quick link in case it doesn't refresh correctly:

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

Will appear as

Redirect

This will still allow you to get to where you're going with an additional click.


Use of meta refresh is discouraged by the World Wide Web Consortium (W3C). Ref: en.wikipedia.org/wiki/Meta_refresh. So it is reccomended to use server redirect instead. JavaScript redirects may not work on all the mobile phones as JavaScript might be disabled.
FYI, the 0 means to refresh after 0 seconds. You may want to give the user some more time to know what's happening.
@Paul Draper, that depends on the server you're running
I added the tag closure to respect the XHTML5 specifications.
@NinethSense's comment makes meta refresh seem like a JavaScript redirect. Meta refresh is not JS and will still work when JS is disabled.
B
Billy Moon

I would use both meta, and JavaScript code and would have a link just in case.

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

For completeness, I think the best way, if possible, is to use server redirects, so send a 301 status code. This is easy to do via .htaccess files using Apache, or via numerous plugins using WordPress. I am sure there are also plugins for all the major content management systems. Also, cPanel has very easy configuration for 301 redirects if you have that installed on your server.


This redirect page can be much more concise with HTML5: pastebin.com/2qmfUZMk (which works in all browsers, and passes w3c validation)
@enyo I am not a big fan of dropping the body tags and the like. Perhaps it validates, and perhaps works in common browsers. I am sure there are some fringe cases it causes issues, and the benefit seems small.
@Fricker because they might not be clicking. They might be controlling via voice, tapping, or navigating in some unknown way. It is an accessibility guideline to follow standards for controls, like using standard HTML A attribute for link, and to think of it, and communicate it as a link, and not to prescribe how someone must interact with it. Also, having click here on a link is not advised, as the screen reader will be harder to navigate. Links should be on text describing the destination, so the user knows where they will arrive before following it, and however they interact with it.
@BillyMoon, Actually the meaning of "click" has already been overloaded to include all those meanings as well. "click" will do fine.
@BillyMoon under what occasional circumstances the browser ignore 0 value meta refresh? Thanks!
m
miike3459

JavaScript

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

Meta tag

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

Doesn't seem to work for a HTML page in Angular app. Is there any to fix it?
P
Peter Mortensen

I would also add a canonical link to help your SEO people:

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

You would use a canonical link in addition to a redirect? en.wikipedia.org/wiki/Canonical_link_element says that Google prefers use of a redirect instead of a canonical link.
@larsH So what most important to SEO, is it the redirect link or final destination page?
r
reducing activity

This is a sum up of every previous answers plus an additional solution using HTTP Refresh Header via .htaccess

1. HTTP Refresh Header

First of all, you can use .htaccess to set a refresh header like this

Header set Refresh "3"

This is the "static" equivalent of using the header() function in PHP

header("refresh: 3;");

Note that this solution is not supported by every browser.

2. JavaScript

With an alternate URL:

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

Without an alternate URL:

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

Via jQuery:

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

3. Meta Refresh

You can use meta refresh when dependencies on JavaScript and redirect headers are unwanted

With an alternate URL:

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

Without an alternate URL:

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

Using <noscript>:

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

Optionally

As recommended by Billy Moon, you can provide a refresh link in case something goes wrong:

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

Resources

Wikipedia Meta refresh

The Performance Impact of META REFRESH

Refresh (reload) a page once using jQuery?


Your "Via jQuery" example doesn't use any jQuery.
Do not call setTimeout with a string. Pass a function instead.
"HTTP Refresh Header via .htaccess" - why it is relevant in question asking about redirect from HTML page?
If you can do a redirect from the HTTP headers (such as in .htaccess) then you should use a 301 or 302 redirect, not a refresh.
P
Paul

If you are looking forward to follow modern web standards, you should avoid plain HTML meta redirects. If you can not create server-side code, you should choose JavaScript redirect instead.

To support JavaScript-disabled browsers add a HTML meta redirect line to a noscript element. The noscript nested meta redirect combined with the canonical tag will help your search engine rankings as well.

If you would like to avoid redirect loops, you should use the location.replace() JavaScript function.

A proper client-side URL redirect code looks like this (with an Internet Explorer 8 and lower fix and without delay):

<!-- 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 includes details on why <meta http-equiv="refresh" is deprecated by the W3C.
The arguments which the w3c provides against HTML redirects also apply to Javascript redirects. Additionally, Javascript redirects require javascript enabled, in contrast to HTML redirects. Therefore HTML redirects are strictly better than Javascript redirects in cases where one can use both.
I
IS4

The following meta tag, placed between inside the head, will tell the browser to redirect:

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

Replace seconds with the number of seconds to wait before it redirects, and replace URL with the URL you want it to redirect to.

Alternatively, you can redirect with JavaScript. Place this inside of a script tag anywhere on the page:

window.location = "URL"

R
RickyA

It would be better to set up a 301 redirect. See the Google's Webmaster Tools article 301 redirects.


The question specifically asks for a basic .html page. I guess asker can't modify .htaccess or similar (for instance using Github Pages or similarly limited hosting). 301 is not doable in such cases
K
Kamil Kisiel

You could use a META "redirect":

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

or JavaScript redirect (note that not all users have JavaScript enabled so always prepare a backup solution for them)

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

But I'd rather recommend using mod_rewrite, if you have the option.


mod_rewrite (only) applies to Apache.
Regarding Apache: Why mod_rewrite and not a simple Redirect directive without and extra module?
P
Peter Mortensen

As soon as the page loads, the init function is fired and the page is redirected:

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

Place the following code between the and tags of your HTML code:

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

The above HTML redirect code will redirect your visitors to another web page instantly. The content="0; may be changed to the number of seconds you want the browser to wait before redirecting.


P
Peter Mortensen

Put the following code in the <head> section:

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

P
Peter Mortensen

I found a problem while working with a jQuery Mobile application, where in some cases my Meta header tag wouldn't achieve a redirection properly (jQuery Mobile doesn't read headers automatically for each page so putting JavaScript there is also ineffective unless wrapping it in complexity). I found the easiest solution in this case was to put the JavaScript redirection directly into the body of the document, as follows:

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

This seems to work in every case for me.


p
parvus

The simple way which works for all types of pages is just to add a meta tag in the head:

<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

You can auto redirect by HTTP Status Code 301 or 302.

For PHP:

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

That is not a redirect from an HTML page.
S
Sangwin Gawande

I use a script which redirects the user from index.html to relative url of 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>

Redirect url in above method can be relative. e.g: you want to redirect to Login page or any relative page by index.html in root of website. don't need to know your domain name. but when you set window.location.href="xxx"; you must know domain name.
k
kriscross07

You should use JavaScript. Place the following code in your head tags:

<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

Just use the onload event of the body tag:

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

Just a note, this will only work if javascript is enabled, if you need support clients without javascript use the meta tag method instead
P
Peter Mortensen

Razor engine for a 5 second delay:

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

E
Edward

Just for good measure:

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

Make sure there are no echo's above the script otherwise it will be ignored. http://php.net/manual/en/function.header.php


The question specifically asks for a basic .html page. I guess asker can't modify .htaccess or similar (for instance using Github Pages or similarly limited hosting). PHP is not available in such cases.
I would consider something generated by PHP (Pre-Hypertext Processor) a "basic HTML page". Nowhere in the question did it mention a file type.
Eeek. Why status 303? I've never seen that before. And why are you redirecting to an email address (an invalid URL), anyway?
@SimonEast no idea, i dont remember putting those values in even though it was 8 years ago! fixed anyway.
P
Peter Mortensen

As far as I understand them, all the methods I have seen so far for this question seem to add the old location to the history. To redirect the page, but do not have the old location in the history, I use the replace method:

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

P
Peter Mortensen

You don't need any JavaScript code for this. Write this in the <head> section of the HTML page:

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

As soon as the page loads at 0 seconds, you can go to your page.


this is already covered in the accepted answer & top comments - consider editing the answer than posting a duplicate one
V
Vanquished Wombat

This is a redirect solution with everything I wanted but could not find in a nice clean snippet to cut & paste.

This snippet has a number of advantages:

lets you catch and retain any querystring params folks have on their url

makes the link unqiue to avoid unwanted caching

lets you inform users of the old and new site names

shows a settable countdown

can be used for deep-link redirects as retains params

How to use:

If you migrated an entire site then on the old server stop the original site and create another with this file as the default index.html file in the root folder. Edit the site settings so that any 404 error is redirected to this index.html page. This catches anyone who accesses the old site with a link into a sub-level page etc.

Now go to the opening script tag and edit the oldsite and newSite web addresses, and change the seconds value as needed.

Save and start your website. Job done - time for a coffee.


o
object-Object

You can do it in javascript:

location = "url";