HTML Page Redirect Example

You can use one of following 3 methods...
  • Using HTTP-EQUIV Refresh
  • JavaScript window.location.href
  • window.location.replace

How to Redirect users to a New Web Page from an existing Web Page

If you need to redirect your visitors to a new page, Place the following HTML redirect code between the <HEAD> and </HEAD> tags of your HTML code.This is the best way to do it as Search Engines can read this and then they will crawl your new web page.

<html>
<head>
..... 
<meta HTTP-EQUIV="REFRESH" content="0; url=http://www.yourdomain.com/path/page.html">
</head>
<body>
.....
</body>
</html>

You can also use JavaScript to do a redirect

Javascript Redirects cannot be detected by the search engines because they don't yet parse Javascript. The script can be placed anywhere on the page, but it is best to place it in the <head> section so that it runs as soon as the page begins to load. So if you want your new page to be crawled by Search Engines then it must be available via some other link you your website or you tell the crawlers using a SiteMap.

Tip: You can also use window.location.href instead of just window.location
<SCRIPT  TYPE="text/javascript" LANGUAGE="JavaScript"> <!--
      var URL = 'http://www.yourdomain.com/path/page.html';
      window.location = URL;
// --> </SCRIPT>

If you want your users to see the Existing Web Page and give them a message before doing a Redirect then you must use this in Conjunction with setTimeout() function

<SCRIPT  TYPE="text/javascript" LANGUAGE="JavaScript"> <!--

    setTimeout("RedirectToNewPage();", 3000);

    function RedirectToNewPage() {

        var URL = 'http://www.yourdomain.com/path/page.html';
        window.location = URL;
        return;

    }

// --> </SCRIPT>

Another way to do it using Javascript is window.location.replace

<SCRIPT  TYPE="text/javascript" LANGUAGE="JavaScript"> <!--
      var URL = 'http://www.yourdomain.com/path/page.html';
      window.location.replace(URL);
// --> </SCRIPT>

What is the difference between window.location.href versus window.location.replace ?

As the name suggest window.location.href is telling the browser what the the new location is but window.location.replace is telling the browser that replace the current location with the new location. So with window.location.replace when you click the browser back button you won't see the previous page that had the window.location.replace JavaScript code.

No comments:

Post a Comment

NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.