How to redirect a URL using JavaScript

The window.location object can redirect a URL to a new location using JavaScript operations, typically using server configuration and http header properties

Many URLs in a web page is redirected to a new location, typically using server configuration and HTTP header properties. But in many cases, it may be necessary to use JavaScript to redirect or navigate to another URL There are many reasons for being directed to a new page or URL, such as:

Changed the domain or URL structure

The user has submitted a form, but wants to direct them to the next page in the sequence

This page may require authorization

Redirect from HTTP to HTTPS

Required to trigger new page in single page application etc.

window.location is object management The address loaded by the browser. Manipulating location objects is how you manage page redirects using JavaScript. The location object has properties and methods that trigger JavaScript page redirections

Location object properties:

hash: Used for single-page applications and single-page websites

host: The domain name of the URL

hostname: similar to host

href: the complete URL

origin: the protocol and domain of the URL

pathname: Original post URL slug or page

port: If the URL contains port

Protocols: http, https, ftp, ftps, etc.

Each of these properties is String, and supports all standard string methods

The location object methods are:

assign: Sets the location object to a new URL

reload: Force the page to reload with the same URL

Replacement: Trigger redirect

search: Allow queryString

Redirect to new address

After changing the address, a 301 redirect should be performed. This is where the server sends HTTP status code 301 with the new address

The 301 status code tells the user agent: the browser or search engine spider that there is a new address

301 Redirect allows you to keep the traffic flowing , and want your search engine rankings.

Normally you would do this from the server. But sometimes it is not possible and you need to use JavaScript to redirect to the URL are all useful, including when you need to redirect from HTTP to HTTPS. But a cleaner way to redirect from HTTP to HTTPS using JavaScript is the following code snippet:

window.location.assign("new target URL");
window.location.replace("new target URL");

Properties and methods of the window.location object can be manipulated using JavaScript to redirect to different URLs. Among them, location.replace and location.assign are very useful. The replace method keeps the session history clean, and the assign method allows the user to backtrack through the URL history.

The above is the detailed content of How to redirect a URL using JavaScript. For more information, please follow other related articles on the PHP Chinese website!