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:
For reloading the page:
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);
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.
Contains the protocol (
http,https,...) of the page.
location.protocol; // https:
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"
location.host; // medium.com
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"
Contains the path after the hostname.
location.href; //https://medium.com/@jagathishsaravanan location.pathname; // "/@jagathishsaravanan"
Returns the search part of URL.
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>
Origin of specific location.
Loads the resource at the URL provided in the parameter.
This will redirect to
**Location.reload()** method reloads the current URL, like the Refresh button.
It has an optional parameter
forceReload, which defaults to
true. Then it loads the page from the server, instead of loading from the browser cache.
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.
Returns the whole URL as a string.
Thank you for reading ! I hope this tutorial will surely help and you if you liked this tutorial, please consider sharing it with others.
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 - 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 - 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.
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 (2004) released. This release adds corrections for security issues based upon RHEL 8.2 souce and here is how to upgrade it.