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 new domain, to redirect visitors from mobile device 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 client side redirection.

Using JavaScript you can do client side redirection, however it is not 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.

Simple JavaScript Redirection to Another Page

1. Using window.location method: Use these scripts to the head section of your page.

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

2. Using window.location.href method: Use these scripts to the head section of your page.

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

3. Using window.location.assign method: Use these scripts to the head section of your page.

<script type="text/javascript">
window.location.assign="http://www.newpage.com";
</script>

4. Using window.location.replace method: Use these scripts to the head section of your page.

<script type="text/javascript">
window.location.replace="http://www.newpage.com";
</script>

JavaScript Redirect to Another Page After 'x' Seconds

1. Using onLoad method: Use these scripts in 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>

JavaScript Redirect to Another Page On Load

1. Using onLoad method: Use these scripts in 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>

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="http://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 action="/search">
Enter your search text: <input type="text" id="searchtext" name="q">
&nbsp;<input onclick="myFunction()" type="submit" value="Search It" /></form>
<script>
function myFunction()
{
var search = document.getElementById("searchtext").value;
window.location = '/search?q='+search; 
}
</script>
</body>

Intro Posts