What are the Different Ways to Redirect Page in JavaScript?

When you click on a link or type the URL to go to one page but sometimes it may go to another page internally due to page redirection on that page. There may be several reasons to redirect to a new page from the original page. The reasons you may want redirection are to redirect from your old domain to a new domain, redirect visitors from mobile devices to the mobile site, to redirect to the visitors from different countries to their respective country-level domain URL and many more. You can use temporary or permanent redirection methods to redirect from on-page to another page. The permanent redirection is server-side redirection and temporary redirection in the client-side redirection.

Using JavaScript you can do the client-side redirection. Here we will discuss different ways to redirect page in javascript. However, it is not the preferred method for page redirection, a search engine may ignore JavaScript redirection. Do not use this feature to spam the search engine, if such you may band from search engine. Here are given different redirection methods and their purpose to redirect from one page to another page in JavaScript, you may use any one of them according to your circumstance.

Table of Contents

Simple JavaScript Redirection to Another Page

1. Using the onLoad method: Use these scripts in the body tag to redirect to another page after ‘5’ seconds.

<body onLoad="setTimeout(location.href='http://www.newpage.com', '5000')">

2. Using Redirect function: Use these scripts in the head section to redirect to another page after ‘5’ seconds with redirection message.

<script type="text/javascript">
function Redirect()
{
 window.location="http://www.newpage.com";
}
document.write("You will be redirected to a new page in 5 seconds");
setTimeout('Redirect()', 5000);
</script>

Redirection to Another Page On The Page Load

1. Using the onLoad method: Use these scripts in the body tag to redirect to another page on load.

<body onLoad="setTimeout(location.href='http://www.newpage.com', '0')">

2. Using a function: Use these scripts in the head section to redirect to another page on load.

<script type="text/javascript">
function Redirect()
{
 window.location="http://www.newpage.com";
}
setTimeout('Redirect()', 0);
</script>

Read Also: How to Create Simple JavaScript Fade Effect Animation?

JavaScript Redirect to Another Page On Click

1. Using a function: Use these scripts in the head and body section to redirect to another page on button click.

<head>
<script>
function myButton()
{
window.location="https://www.siteforinfotech.com";
}
</script>
</head>
<body>
<button onclick="myButton()">Click me</button>
</body>

JavaScript Redirect to Another Page Passing Variables

1. Using a function: Use these scripts in the body section to redirect to another page on button click with passing the value of text box.

<body>
<form>
Enter your search text: <input type="text" id="searchtext" name="s">
</form>
<button onclick="myFunction()">Search It</button>
<script>
function myFunction()
{
var search = document.getElementById("searchtext").value;
window.location = '/?s='+search; 
}
</script>
</body>

Preview:

Read Next: How to Create a Digital Clock in JavaScript?

What are the Different Ways to Redirect Page in JavaScript?

Simple JavaScript Redirection to Another Page

Redirection to Another Page On The Page Load

JavaScript Redirect to Another Page On Click

JavaScript Redirect to Another Page Passing Variables

Related Posts