How to redirect to another web page using JavaScript

0 2566

Page redirection also called URL redirection (URL forwarding). URL redirection is a way to automatically redirect a web page to another web page. You can redirect web pages on the same website or it can be on a different web site or a web server.

In JavaScript, you can use many methods to redirect a web page to another web page. JavaScript, window.location object function is used to redirect to a URL which is a property of the Window object.

You can be used to get the current URL address (web address) and to redirect the browser to a new page. The window.location used with many properties like location.href property, location.replace property, location.assign property.

window.location.href Method:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Page Redirect onclick Event</title>
</head>
<body>
  <h1>JavaScript Page Redirect onclick Event<br> using window.location.href </h1>
   <button type="button" onclick="Redirectcodingtag()"> Go to codingtag.com </button>
    <p><strong>Note:</strong>This page will be redirected to new location https://www.codingtag.com/ by clicking the button above.
    <br>
    <br>
    <strong>You can get back to this page by clicking the browser back button.</strong></p>
    <script>
   function Redirectcodingtag() {
     window.location.href = "https://www.codingtag.com/";
   }
</script>
</body>
</html>

window.location.replace Method

replace() method does not save the originating page in the session history mean location.replace() method delete the current URL from document history.

Users can not be able to use the browser back button to navigate to it (unable to navigate back to the original document).

Syntax:

window.location.replace("page_url")

Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> JavaScript Automatic Page Redirect using window.location.replace </title>
</head>
<body>
  <h1>JavaScript Automatic Page Redirect <br> using window.location.replace </h1>
    <p><strong>Note:</strong> This page will be redirected to new location https://www.codingtag.com/ in 5 sec.
     <br>
      <br>
      <strong>You are not able to get back to this page by clicking the browser back button.</strong>
    </p>
  <script>
  function pageRedirect() {
    window.location.replace("https://www.codingtag.com/");
  }
  setTimeout("pageRedirect()", 5000);
</script>
</body>
</html>