Window Location in JavaScript

Window.location is used to provide a Location object with details about the document's current location. This Location object reflects the location (URL) of the object it's linked to, i.e., it holds information about the current content location (host, href, etc.)

JavaScript Location Object

The window.location attribute represents the URL of the page being displayed in that window.

Since the window is at the top of the scope chain, window.location properties can be accessed without the window prefix. Using the window object's location attribute, you may get the page's URL, hostname, protocol, etc.

Javascript window.location.href property

The href attribute on the location object contains the current webpage's URL.
By modifying the href property, a user can go to a new URL or page.
It adds an item to the history list (so that when the user clicks "Back," they can return to the current page).
Updating the href attribute is faster andeasier than using the assign() function.
The calling function is slower than accessing the property.

Syntax:

The following syntax shows javascript windows.href.location working procedure.

The "window.location.href " function is used to display the current URL path. We can see the path of the website and html file.

Examples

The following examples show the href value of the location of the window using the javascript method.

Example1

The following example shows the file path on the running browser. We can see the URL link of the location of the windows using the "innerHTML" function.

<!DOCTYPE html>
<html>
<body>
<h3> JavaScript function </h3>
<h4> The javascript window.location.href object </h4>
<p id = "value"> </p>
<script>
document.getElementById("value").innerHTML = 
"The full windows href URL of the page is:<br>" + window.location.href;
</script>
</body>
</html>

Output

The given output shows the current url link.

Example2

The following example shows the file path on the running browser. It shows the current href link using the onclick function and buttons. We can see the URL link using the alert box.

<!DOCTYPE html>
<html>
<body>
<h3> JavaScript function </h3>
<h4> The javascript window.location.href object </h4>
<button onclick = "getLocation()">
Get Href URL
</button>
<script>
function getLocation() {
// Get the current location
var location_var = window.location.href;
alert(location_var);
}
</script>
</body>
</html>

Output

The given output shows the current href link using the javascript function.

Output1

Output2

JavaScript location properties

We can use windows location properties using the JavaScript function. We can get the path, filename, port number and other files and url related information. We can see multiple functions or methods to get location property as per user requirement.

Location.protocol

The Javascript location.protocolis used to show the protocol scheme of the given URL, including the final colon (:) symbol. The 'http:' and 'https:' are examples of the location protocol in javascript.

Syntax

The below syntax is utilized for the return protocol of the url.

The website name or file path name is the required protocol, and this syntax is used to display the protocol.

Example

The following example shows other properties of the JavaScript location protocol.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location protocol </h2>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<p id = "value"></p>
<script>
function newDocument() {
// Prints protocol such as http: or https:
document.getElementById("value").innerHTML ="URL Path:+window.location.protocol + "<br>";
}
</script>
</body>
</html>

Output

The given output shows the url properties value.

JavaScript location host and hostname property

The Javascript location.hostis displayed as the required or available host number. The Javascript location.hostname is used to get the required or available hostname.

The "localhost:8080" is an example of the location host of the URL. The "www.javatpoint.com " is an example of the local hostname.

Syntax

The below syntax is used to return the host value.

The below syntax is used to return the hostname.

The simple syntax is worked to show localhost of the file path or url.
The website name or file path name is displayed as a hostname.

Example

The following example is displayed the JavaScript location hostname.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> JavaScript Location hostname property </title>
</head>
<body>
<h2> JavaScript Location host and hostname </h2>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<p id = "value"></p>
<p id = "value1"></p>
<script>
function newDocument() {
// Prints host with a usable port such as a localhost:8080
document.getElementById("value").innerHTML = " URL host with port: " +window.location.host + "<br>";
// Prints hostname such as a www.javatpoint.com
document.getElementById("value1").innerHTML = " URL hostname with port: " +window.location.hostname + "<br>";
}
</script>
</body>
</html>

Output

The given output shows the url properties value.

JavaScript location port

The Javascript location.port shows the port number of the available URL. The 8080 or 8085 is an example of a windows location port.

Syntax

The below syntax is used to show the location port of the url.

Example

The following example is displayed the JavaScript location hostname.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location port </h2>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<p id = "value"></p>
<script>
function newDocument() {
         // Prints port number, e.g. 8080
document.getElementById("value").innerHTML = " URL port: " +window.location.port+ "<br>";
}
</script>
</body>
</html>

Output

The given output shows the url properties value.

Location.pathname

The Javascript location.pathnameincludes an initial'/'followed by the given path of the URL. The "/js/index.html" is an example of the location pathname.

Syntax

The below syntax and return values are displayed as the path value.

Example

The following example is displayed the JavaScript location pathname.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location Path </h2>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<p id = "value"></p>
<script>
function newDocument() {
       document.getElementById("value").innerHTML = " Path: " +window.location.pathname + "<br>";
}
</script>
</body>
</html>

Output

The given output shows the url properties value.

Location.hash

The Javascript location.hash gives a given string. It contains a '#' followed by the fragment identifier of the available URL.

Syntax

The given syntax is used to show the hash included in the url.

Example

The following example is displayed the JavaScript location pathname.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location Hash</h2>
<p><a id="jtp" href="file:///G:/writing%20stuff/content-writing/JavaTpoint/2022/nov/file.html#seee_hash_data">
JavaScript Location Hash
</a><p>
<p id="value"></p>
<script>
let url_data = document.getElementById("jtp");
document.getElementById("value").innerHTML = "The Hash data of the URL is: " + url_data.hash;
</script>
</body>
</html>

Output

The given output shows the url properties value.

Location.origin

The Javascript location.origin is a string that includes the canonical form of the origin of the specific location.

The http://localhost:8080 is the demo example of the javascript location by default.

Example

The following example is displayed the JavaScript location's origin format.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location Origin </h2>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<p id = "value"></p>
<script>
function newDocument() {
       document.getElementById("value").innerHTML = "Origin: " +window.location.origin + "<br>";
}
</script>
</body>
</html>

Output

The given output shows the url properties value.

Location.username

The Javascript location.username is a string that includes the username before the domain name.

The "url.username" is used to get the predefined URL value's username using javascript.

Example

The following example is displayed the JavaScript location username.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location Username</h2>
<p><a id="jtp" href="https://javatpoint:jtp89123@www.javatpoint.com">
JavaScript Location property
</a><p>
<p id="value"></p>
<script>
let url_data = document.getElementById("jtp");
document.getElementById("value").innerHTML = "The Username of the URL is: " + url_data.username;
</script>
</body>
</html>

Output

The given output shows the url properties value.

Location.password

The Javascript location.password is a string that shows the password specified before the domain name.

Example

The following example is displayed the JavaScript location password.

!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location Password</h2>
<p><a id="jtp" href="https://javatpoint:jtp89123@www.javatpoint.com">
JavaScript Location property
</a><p>
<p id="value"></p>
<script>
let url_data = document.getElementById("jtp");
document.getElementById("value").innerHTML = "The password of the URL is: " + url_data.password;
</script>
</body>
</html>

Output

The given output shows the url properties value.

Location.search

The Javascript location.searchis a string which shows the query string of the given URL:

"?type=listing&answer=no"

Example

The following example is displayed the JavaScript location password.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location Search</h2>
<p><a id="jtp" href="https://javatpoint:jtp89123@www.javatpoint.com/?yes">
JavaScript Location property
</a><p>
<p id="value"></p>
<script>
let url_data = document.getElementById("jtp");
document.getElementById("value").innerHTML = "The Location search of the URL is: " + url_data.search;
</script>
</body>
</html>

Output

The given output shows the url properties value.

Location properties Examples

The following example shows all properties of the JavaScript location. Here, we can see all the location properties of the file path using the javascript function.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Location property </title>
</head>
<body>
<h2> JavaScript Location property </h2>
    <h3> The window.location assign object </h3>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<script>
function newDocument() {
    // Prints complete file URL
    document.write(" full url path: " +window.location.href + "<br>");
    // Prints protocol such as http: or https:
    document.write(" URL Path: <br>" +window.location.protocol + "<br>"); 
    // Prints hostname with a usable port such as a localhost:8080
    document.write(" URL hostname with port: " +window.location.host + "<br>");  
    // Prints hostname such as localhost or www.javatpoint.com
    document.write(" url hostname: " +window.location.hostname + "<br>");
     // Prints port number, e.g. 8080
    document.write(" port: " +window.location.port + "<br>");
     // Prints pathname 
    document.write(" url pathname: " +window.location.pathname + "<br>"); 
     // Prints query string 
    document.write(" full url search: " +window.location.search + "<br>");
    // Prints fragment identifier
    document.write(" full url identifier: " +window.location.hash);
}
    </script>
    </body>
</html>

Output

The given output shows the url properties value.

Manipulate the Javascript location

The manipulation of location is used to get the required url or file path as per user requirement. Themanipulation of the locationis used three methods which are assign(),reload(), andreplace(). This method is worked with JavaScript functions and events.

JavaScript Assign() method

The assign() method is used to get a URL and navigate url path on the page. It is worked for adding url path to the browser's history stack.

Syntax

The following syntax uses to assign the required URL.

The "window.location.assign" function is used to get the required URL path.
We can place the path or url link of the file or website.

Example

The given an example assigns the given and the required URL. Here, we can use the button with the onclick function to display the assigned url.

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript location method </h2>
<h3> The window.location assign object </h3>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<script>
function newDocument() {
  window.location.assign("https://www.javatpoint.com")
}
</script>
</body>
</html>

Output

The given output images show the assigned url.

Output1

Javascript replace() method

The replace() pattern is related to assign(), except it doesn't create a new history stack entry. Therefore, you can't use the back button to go back. This function shows new or replaced URLs from old URLs.

Syntax

The following syntax uses to replace the required URL.

The "window.location.replace" function is used to get a new URL path.
We can replace the path or url link from old to new using the simple javascript method.

Example

The given example replaces the given required URL. Here, we can use a button with the onclick function to get a new url from an old url.

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript location method </h2>
<h3> The window.location replace object </h3>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<script>
function newDocument() {
  window.location.replace("https://www.javatpoint.com")
}
</script>
</body>
</html>

Output

The given output images show replaced url.

Output1

Javascript reload() method

The reload() method is utilized to reload a page. When you call reload() with no argument, the browser reloads the page in the most effective method, loading page resources from the cache if they haven't changed since its last request.

Syntax

The following syntax uses to reload the required URL.

the location.reload() function reload url and display a blank page.
It does not need any file path or current url

Example

The given an example reloads the given required URL. We can reload the page using the javascript onclick function.

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript location method </h2>
<h3> The location.reload object </h3>
<input type = "button" value = "Load new document" onclick = "newDocument()">
<script>
function newDocument() {
location.reload();
}
</script>
</body>
</html>

Output

The given output shows reload url.

Summary

The location object includes a page's URL. It can be accessed using window.location or document.location.

The Location object has characteristics that represent the URL, such as protocol, pathname,host, and search. To manipulate the location, set its properties and use assign(), replace(), and reload().

Next TopicJavaScript Certification Free

← prev next →