Javascript Redirect

In interactive web applications, users can navigate from one page to another. Such navigation are possible by the use of hyperlinks, functions of client and server side scripts. For example, in PHP, the header() function is used to redirect by specifying location URL.

On the other hand, we can perform page redirects with some client side script like Javascript. We can prefer to use Javascript redirect, when we need to perform navigation on event basis. For example, if we want to perform page redirect on button click, then can call Javascript function to redirect to the target URL.

javascript_redirect

Javascript contains various properties to handle redirects with client side. These possible types of redirect code is used based on different types of browser. Because, some properties of Javascript object may not work in some browser.

window.location.href

This property of window object indicates current page URL. And we can switch over to another page by setting this property with required URL. For example,

<html>
<head>
<script type="javascript">
function fnRedirect() {
window.location.href="phppot.com";
}
</script>
</head>
<body>
<input type="button" name="redirect" value="Redirect Now" onclick="fnRedirect()" />
</body>
</html>

In above example, the redirect button is used to call Javascript function to redirect, on clicking the button.

window.navigate

By setting this windows navigate property, we can perform page redirect. But, this property works only for Internet Explorer. And, a URL can be assigned to this property, as like as we have seen to set it with window’s location property above.

For example, we can replace the following line,

window.navigate="phppot.com";

instead of,

window.location.href="phppot.com";

self.location

This property works as same as windows.location.href except for the pages that include frames. When we use this property within frame to set location, then the content of the frame will be changed with the specified location’s content. For example, save the following html content as redirect.html.

<input type="button" name="redirect" value="Redirect Now" onclick="self.location='http://phppot.com'" />

When we open this file with the browser, the redirect button click event will navigate us to the URL, http://phppot.com. In other case, if we use this file as a source of a frame like,

<frameset rows="300,*">
<frame src="redirect.html" name="redirect">
<frame src="footer.html" name="footer">
</frameset>

then, then the button click event will replace the frame content with the content of the page http://phppot.com.

Other Similar Javascript Redirect

Like the location properties we have seen above, we can use top.location.href, parent.location.href based on the place from where the redirection is going to take place. When we use simply location.href, then, by default this will be set to the window object.

If we want to go back to the previous page after redirect, we can refer history by using back() function. For example,

<input type="button" name="back" value="Back" onclick="window.history.back();" />

In some cases, we may entirely change our website domain and want to redirect users who visit the old URL. At that time, to stop users who try to go back using browser back button or by Javascript back() function, we can use replace() function as like as below,

window.location.replace("phppot.com");

instead of,

window.location.href="phppot.com";

Even though, Javascript redirect is comfortable with event handling facilities, it is preferable to choose server side programming to have secured redirection process.

This Javascript code tutorial was published on May 20, 2013.

↑ Back to Top