Javascript Redirect

by Vincy. Last modified on July 15th, 2022.

In interactive web applications, users can navigate from one page to another. Such navigation is possible by the use of hyperlinks, and functions of the client and server-side scripts. For example, in PHP, the header() function is used to redirect by specifying the 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 an event basis. For example, if we want to perform a page redirect on a button click, then can call the Javascript function to redirect to the target URL.

Javascript contains various properties to handle redirects with the client-side. These possible types of redirect codes are used based on different types of browsers. Because some properties of a Javascript object may not work in some browsers.

window.location.href

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

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

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

window.navigate

By setting this window to navigate property, we can perform page redirect. But, this property works only for Internet Explorer. And, an 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.half except for the pages that include frames. When we use this property within the 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='https://phppot.com'" />

When we open this file with the browser, the redirect button click event will navigate us to the URL, https://phppot.com. In another 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 https://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 the redirect, we can refer to history by using the 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 the 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 a secured redirection process.

Comments to “Javascript Redirect”

Leave a Reply to Vincy Cancel reply

Your email address will not be published. Required fields are marked *

↑ Back to Top

Share this page