Blogs

JavaScript Redirect to a New URL – JavaScript Tutorial

Posted on by admin

Summary: In this tutorial, you’ll learn how to use JavaScript to redirect to a new URL or page.

Introduction to JavaScript redirection

Sometimes, you

want to redirect users from one page to another page that has a different URL

.

For example, you can create an app landing page that purely redirects users to Google Play or Apple Store, depending on the operating system their smartphones have.

To do so, You need:

Detect the operating system

  • of smartphones
  • Redirect to Apple Store if the operating system is iOS and Google Play if the operating system is Android.

Redirection can be performed in web browsers

using the JavaScript Redirection API

.

It is important to note that JavaScript redirection runs entirely in web browsers. Therefore, it does not return status code 301 (move permanently) as a server redirect.

Therefore, if you move your site to a separate domain or create a new URL for an old page, you should always use server redirection.

Redirect

to a new URL

To redirect web browsers to a new URL from the current page to a new one, use

the location:Code language: JavaScript (javascript)For

example

:Code language: JavaScript (javascript)

Assigning a value to the href property of the location object has the same effect as calling the assign() method of the location object:

Code language: JavaScript (javascript)

Any of these calls will redirect to the new URL and create an entry in the browser’s history stack. It means that you can return to the previous page via the browser’s Back button.

To redirect to a new URL without creating a new entry in the browser history stack, use the replace() method of the location object:

Code language: JavaScript (javascript)

The following example creates a page that redirects web browsers to Google Play or Apple Store if the operating system is Android or iOS. Otherwise, it will display a message stating that the operating system is not supported

:

index.html

Code language: HTML, XML (xml)

js/app.js

Code language: JavaScript (javascript)

How it works.

First, define an app object with the keys are OS and the values are Google Play and Apple Store URLs

: Code language: JavaScript (javascript)Second, define a function that detects the

language OS

:Code: JavaScript (javascript)Third, create the redirect() function that detects the operating system

and redirects the web browser based on the detected operating system

:Code language: JavaScript (javascript)

Finally, call the redirect():Redirect function

to

a relative URL

The following script redirects to the about page.html which is at the same level as the current page.

Code language: JavaScript (javascript)The following script redirects to the

contact page.html located in the root folder

:Code language: JavaScript (javascript)Redirect when loading the page If you want to redirect to a new page on loading, use the following code:Code language

:

JavaScript (javascript)

Summary

To

redirect

to a new URL or

  • page, assign the new URL to the location.href property, or use the location.assign() method.
  • The location.replace() method redirects to a new URL, but does not create an entry in the browser’s history stack.
admin