Page Re-direction in JavaScript: Day 6

Jeetendra Gund
Dec 18, 2014
6.7k
0
0
Article

Introduction

Before reading this article, I highly recommend reading the following previous parts:

Page Re-direction in JavaScript

Its name indicates the concept, page redirection means moving to another location or page using JavaScript at the client side. Sometimes you are visiting a specific website but it goes to another page because it is internally redirected. If you visit the shopping website: Amazon, it will show like following image:

Page Re direction in JavaScript

It will show you a pop-up message “Shopping from India? Looking for Amazon.in?” with the two options, the first “Stay on Amazon.com” and the second “Go to Amazon.in” and when you click on the second option the page will be redirected to Amazon.

There are multiple reasons to redirect from the original page as follows:

One reason we just discussed in the previous example. The browser gets your location and asks for the change of the page and that button click event page is redirected.
If you have created a new domain and you want to redirect all your visitors from the old to the new domain.

The following are the various page redirection methods, to redirect from one page to another in JavaScript.

These methods are used for redirecting to another page; just add this code to the head section:

Using window.location.

Example:
1. <script type="text/javascript">
2. 
5. </script>
Using window.location.href.

Example:
1. <script type="text/javascript">
2. 
5. </script>
Using window.location.assign.

Example:
1. <script type="text/javascript">
2. 
5. </script>
Using window.location.replace.

Example:
1. <script type="text/javascript">
2. 
5. </script>
Using window.open.

Example:
1. <html>
2. <head>
3. <script type="text/javascript">
4. 
9. </script>
10. </head>
11. <body>
12. <input type="button" onClick="WinOpen()" value="WinOpen">
13. </body>
14. </html>
In the preceding code you see the various properties are used, like height, width, status, resizable, fullscreen, left, right and so on. The status, resizable and fullscreen are the ON/OFF properties that you can set to 0 for OFF and 1 for ON.

Output

When you click on the button it will open a new window like the following:

output

Redirect to another page after some time interval

For this there is one method setTimeout() to set a time interval for redirecting. Just pass the redirected page and the time interval.

Example:

<html>
<head>
<script type="text/javascript">
function Redirect()
{
window.location="http://www.c-sharpcorner.com";
}
document.write("You will be Redirected in 5s.");
//set time interval and page to redirect
setTimeout('Redirect()', 5000);
</script>
</head>
<body>
</body>
</html>

Output: When you run the code it will show the output like the following. After 5 seconds it will redirect to the c-sharpcorner page.
You will be Redirected in 5s.

Page redirected to another page OnClick event

Just call the method in the OnClick event. When you press the button it will redirect to another page.

Example:

<html>
<head>
<script type="text/javascript">
function Redirect()
{
window.location="http://www.c-sharpcorner.com";
}
</script>
</head>
<body>
<button onclick="Redirect()">Redirect Me</button>
</body>
</html>

Output

When you click on the Redirect Me button it will redirect to the www.c-sharpcorner.com page.

Redirected page

Summary

I hope you understand the concept of Page Redirection in JavaScript. If you have any suggestion regarding this article then please contact me.