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.
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.
Comments to “Javascript Redirect”
Leave a Reply
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.
I like the valuable information you provide in your articles.
I will bookmark your weblog and check again here regularly.
I’m quite sure I’ll learn many new stuff right here!
Good luck for the next!
no words vera-level……super pinnittinga…
Migavum nandri Rajasekar.