Redirect, Refresh, Access the URL of the Current Page in JavaScript

Redirect, Refresh, and Access the URL of the Current Page in JavaScript. JavaScript’s location object

We can use the window.location property to access the URL of the current page and modify it.

let location = window.location;

For redirecting the page we can use:

location.href = "new url";

// or we can use 

location.assign("new url");

For redirecting without storing in history:

location.replace("new url"); 

For reloading the page:

window.location.reload()

Force refresh

We can pass true to force the reloaded page to come from the server (instead of the cache). Alternatively, we can use false to reload the page from the cache.

//from cache
window.location.reload(); 
window.location.reload(false);

// from server
window.location.reload(true);

Properties of Location Object

1. Href

Contains the entire URL of the page.

location.href; // current page url addresss

When we assign a new value to the property, it will redirect the url value set to the property.

location.href = "https://google.com"; 

Make sure to add http/https. Otherwise, it makes the request on the same page.

2. Protocol

Contains the protocol (http,https,...) of the page.

location.protocol; // https:

3. Host

Website hostname with port number.

location.host; // medium.com 

// with port number 

var anchor = document.createElement("a");
anchor.href = "https://medium.com:4097
anchor.host // "medium:4097"

4. Hostname

Website hostname.

location.host; // medium.com

5. Port

Contains the port number. If the URL does not contain an explicit port number, it will be set to ''.

var anchor = document.createElement("a");
anchor.href = "https://medium.com:4097
anchor.port // "4097"

6. Pathname

Contains the path after the hostname.

location.href; //https://medium.com/@jagathishsaravanan

location.pathname; // "/@jagathishsaravanan"

7. Search

Returns the search part of URL.

I am on page https://medium.com/search?q=javascriptjeep;

location.search; // ?q=javascriptjeep

8. Hash

Contains string of '#' followed by the fragment identifier of the URL. This will be useful when we have links inside the same page.

Example from MDN Web Docs:

<a id="myAnchor" href="/en-US/docs/HTMLHyperlinkElementUtils.href#Examples">Examples</a>

<script>
  var anchor = document.getElementById("myAnchor");
  console.log(anchor.hash); // Returns '#Examples'
</script>

9. Origin

Origin of specific location.

consider we are at page : https://medium.com/search?q=javascriptjeep

location.origin; // https://medium.com

Methods

1. assign

Loads the resource at the URL provided in the parameter.

location.assign("https://medium.com");

This will redirect to medium.com.

2. reload

The **Location.reload()** method reloads the current URL, like the Refresh button.

location.reload();

It has an optional parameter forceReload, which defaults to false when forceReload is true. Then it loads the page from the server, instead of loading from the browser cache.

location.reload(true);

3. replace

Replaces the current resource with the one at the provided URL.

// consider we are google.com

// when we run this line 

location.replace("htts://medium.com")

// it will replace the current page and redirect to medium page

The difference from the assign() method is that after using replace(), the current page will not be saved in session History, meaning the user won’t be able to use the Back button to navigate to it.

4. toString

Returns the whole URL as a string.

location.toString();

// https://medium.com/search?q=javascriptjeep

Thank you for reading ! I hope this tutorial will surely help and you if you liked this tutorial, please consider sharing it with others.

#JavaScript #Location Object #Front End Development #Programming