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

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

JavaScript’s location object

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"

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How to Find Ulimit For user on Linux

Explains how to find ulimit values of currently running process or given user account under Linux using the 'ulimit -a' builtin command.

MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS

MEAN Stack Tutorial MongoDB ExpressJS AngularJS NodeJS - We are going to build a full stack Todo App using the MEAN (MongoDB, ExpressJS, AngularJS and NodeJS). This is the last part of three-post series tutorial.

Creating RESTful APIs with NodeJS and MongoDB Tutorial

Creating RESTful APIs with NodeJS and MongoDB Tutorial - Welcome to this tutorial about RESTful API using Node.js (Express.js) and MongoDB (mongoose)! We are going to learn how to install and use each component individually and then proceed to create a RESTful API.

systemctl List All Failed Units/Services on Linux

Explains how to use the systemctl command to list all failed units or services on Debian, Ubuntu, CentOS, Arch, Fedora, and other Linux distros.

CentOS Linux 8.2 Released and Here is How to Upgrade it

CentOS Linux 8.2 (2004) released. This release adds corrections for security issues based upon RHEL 8.2 souce and here is how to upgrade it.