Quick Reach
How to redirect in javascript
The window.location is an object that can be used to redirect from one page to another in a browser. We sometimes need to redirect users from current page to another (same website or some other website) upon clicking a link or pressing a button or as a session expires etc.
In this tutorial, we will explain how to use javascript window.location with examples.
Syntax to redirect in javascript
Following is the way to use JS redirect:
window.location = “http://www.example.com/”;
Now let us show you examples of javascript redirect by using window.location.
A redirect example
Following is redirect javascript example where we will redirect a web page to google.com by using javascript window.location, as you click on the button.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<body>
<button onclick="redirURL()">Click here to see javascript Redirect</button>
<script type="text/javascript">
function redirURL(){
window.location = "http://www.google.com/";
}
</script>
</body>
</html>
|
As you can see when you click on the button “Click here to see Javascript Redirect” the function will be called at onclick event and the page will be redirected to another URL.
redirect URL example with time delay
You can code in javascript to delay a redirection. This may be useful in situations where you want to show a user with the notification before a session ends or showing a message that you will be redirected to another page, for example, in ten seconds.
Following is an example of redirect URL with a delay of five seconds as you click on the button. See the working example online by clicking the link below:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html>
<html>
<body>
<button onclick="delayredir()">Redirect with five seconds delay</button>
<script type="text/javascript">
function redirURL(){
window.location = "http://www.google.com/";
}
function delayredir(){
document.write("redirect page in 5 secs");
setTimeout('redirURL()', 5000);
}
</script>
</body>
</html>
|
As you can we have two JS functions. As you click on the button “Redirect with five seconds delay” the delayredir function is called which is placed at the onclick event of the button. This function uses the setTimeout function that delays redirection by five seconds and calls another function redirURL that redirects to a given URL by using window.location javascript method.
Using document.location example
You can use document.location instead of window.location to redirect to another web page. See the following example of using JS document.location below.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<body>
<button onclick="redirURL()">Redirect by document.location</button>
<script type="text/javascript">
function redirURL(){
document.location = "http://www.google.com/";
}
</script>
</body>
</html>
|
You can see the page is redirected by using document.location.
Also see: Javascript innerHTML
Leave A Comment?