Redirect from an HTML page

    |
  • Added:
  • |
  • In: Wordpress

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

This Question Has 22 Answeres | Orginal Question | chobo

Put the following code in the <head> section:

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

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.

I would use both meta, and JavaScript code and would have a link just in case. Also, I think it is a good idea to set the refresh rate to 1 for occasional circumstances where the browser ignores 0 value meta refresh.

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta http-equiv="refresh" content="1; 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.

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 your going with an additional click.

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"); ?> 

Read more for other source code in How to auto redirect by HTTP Status Code 301 or 302

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.

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.

I use a script which redirects the user from index.html to home.html

<html> <head> <title>index.html</title> </head> <body onload="document.getElementById('lnkhome').click();"> <a href="Home.html" id="lnkhome">Go to Home Page<a> </body> </html> 

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> 

JavaScript

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

Meta tag

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

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

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

Razor engine for a 5 second delay:

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

Just for good measure:

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

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

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

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 JS disabled browsers add the 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.

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

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" 

Just use the onload event of body tag.

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

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.

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

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

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

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> 

Search
I am...

Sajjad Hossain

I have five years of experience in web development sector. I love to do amazing projects and share my knowledge with all.

NEED HOSTING?
Are you searching for Good Quality hosting?
You can Try It!
Connect Social With PHPAns
Top