The window.location property serves to deliver a Location object that contains specific information regarding the current position of the document. This Location object accurately represents the URL associated with the object, meaning it encapsulates details about the current content's location, such as the host, href, and other relevant attributes.
JavaScript Location Object
The window.location property signifies the URL of the currently displayed page within that window.
As the window resides at the apex of the scope chain, properties of window.location can be accessed directly without needing to use the window prefix. By utilizing the location property of the window object, you can retrieve various details about the current page, including its URL, hostname, protocol, and more.
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 and easier than using the assign function.
- The calling function is slower than accessing the property.
Syntax:
The syntax provided below illustrates the operational mechanism of javascript windows.href.location.
window.location.href = 'https://logic-practice.com';
- The "window.location.href" method is utilized to reveal the present URL path. This allows us to view the path of both the website and the HTML document.
Examples
The subsequent examples demonstrate how to obtain the href value of the window's location through the use of the JavaScript method.
Example1
The example below illustrates the file path displayed in the active browser. By utilizing the "innerHTML" function, we can observe the URL that indicates the location of the windows.
<!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 subsequent example demonstrates the file path displayed in the active browser. It illustrates the existing href link through the use of the onclick function and buttons. The URL link can be viewed via an 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 output provided displays the present href link by utilizing the JavaScript function.
Output1
Output2
JavaScript location properties
Through the utilization of JavaScript functions, we can access the properties of the window location. This allows us to retrieve various details such as the path, filename, port number, as well as other information pertinent to files and URLs. Depending on user needs, there are several functions or methods available to obtain these location properties.
- Location.protocol
The JavaScript property location.protocol is utilized to display the protocol scheme associated with a specific URL, which includes the concluding colon (:) character. Examples of the location protocol in JavaScript include 'http:' and 'https:'.
Syntax
The syntax provided below is employed for defining the return protocol of the URL.
window.location.protocol
- The designation of the website or the directory path is the necessary protocol, and this particular syntax serves to demonstrate the protocol in use.
Example
The subsequent illustration demonstrates additional characteristics 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.
- Properties of the JavaScript location object: host and hostname
The JavaScript property location.host provides the necessary or accessible host number. Meanwhile, the JavaScript property location.hostname is utilized to retrieve the necessary or accessible hostname.
The term "localhost:8080" serves as an illustration of the host address within a URL. Meanwhile, "www.logic-practice.com" exemplifies a local hostname.
Syntax
The syntax provided below is utilized to retrieve the host value.
window.location.host
The below syntax is used to return the hostname.
window.location.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 subsequent example illustrates how to display the hostname using JavaScript's location object.
<!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.logic-practice.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 property location.port provides the port number from the current URL. For instance, values such as 8080 or 8085 serve as examples of a port number in a Windows environment.
Syntax
The syntax presented below is utilized to indicate the port of the URL's location.
window.location.port
Example
The subsequent example demonstrates how to retrieve the hostname using JavaScript's location object.
<!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 property location.pathname consists of a leading '/' accompanied by the specific path of the URL. For instance, "/js/index.html" serves as an illustration of the location pathname.
Syntax
The syntax provided below, along with the corresponding return values, is presented as the value of the path.
window.location.pathname
Example
The subsequent example illustrates the pathname of the JavaScript location object.
<!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 property location.hash provides a specific string. This string consists of a '#' symbol followed by the fragment identifier associated with the current URL.
Syntax
The provided syntax is utilized to display the hash that is present within the URL.
window.location.hash
Example
The subsequent illustration presents the pathname property of the JavaScript location object.
<!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/example/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 property location.origin represents a string that encompasses the canonical representation of the origin for the current location.
The http://localhost:8080 serves as the default demonstration example for JavaScript location.
Example
The subsequent illustration demonstrates the format of the origin property within the JavaScript location object.
<!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 property location.username represents a string that contains the username that precedes the domain name.
The "url.username" property is utilized in JavaScript to retrieve the username component from a predefined URL value.
Example
The subsequent example illustrates the JavaScript location of the 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://Result:jtp89123@www.logic-practice.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 property location.password is a string representation of the password that has been defined prior to the domain name.
Example
The subsequent illustration showcases 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://Result:jtp89123@www.logic-practice.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 property location.search represents a string that displays the query string associated with the current URL:
"?type=listing&answer=no"
Example
The subsequent illustration showcases 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://Result:jtp89123@www.logic-practice.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 subsequent illustration demonstrates every property associated with the JavaScript location object. In this instance, we can observe all the location attributes pertaining to the file path by utilizing a 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.logic-practice.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 alteration of the URL's location is accomplished through three distinct methods: assign, reload, and replace. These methods operate in conjunction with JavaScript functions and events.
- JavaScript Assign method
The assign function serves the purpose of retrieving a URL and directing the browser to that specific path on the webpage. This method is utilized for appending a URL path to the history stack of the browser.
Syntax
The syntax illustrated below is employed to designate the necessary URL.
window.location.assign("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 provided example illustrates how to designate both the specified and the necessary URL. In this scenario, we can utilize a button with the onclick event handler to showcase 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://logic-practice.com")
}
</script>
</body>
</html>
Output
The given output images show the assigned url.
Output1
Output1
- The replace function in JavaScript
The replace method operates similarly to the assign method; however, it does not generate a new entry in the browser's history stack. As a result, utilizing the back button to navigate to the previous page is not an option. This function is utilized to present new or modified URLs in place of the original URLs.
Syntax
The syntax provided below is utilized to substitute the necessary URL.
Window.location.replace("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 provided illustration substitutes the specified required URL. In this case, we can implement a button utilizing the onclick event to derive a new URL from an existing one.
<!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://logic-practice.com")
}
</script>
</body>
</html>
Output
The given output images show replaced url.
Output1
Output1
- Javascript reload method
The reload function is employed to refresh a webpage. When invoked without any parameters, the browser refreshes the page using the most efficient approach, retrieving page resources from the cache if they remain unchanged since the last request.
Syntax
The syntax provided below is utilized to refresh the specified URL.
location.reload();
- The location.reload function reload url and display a blank page.
- It does not need any file path or current url
Example
The provided example refreshes the specified URL. We can achieve a page reload by utilizing the JavaScript onclick event handler.
<!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 contains the URL of a webpage. It can be retrieved by utilizing either window.location or document.location.
The Location object encompasses attributes that denote the URL, including protocol, pathname, host, and search. To interact with the location, you can modify its properties and utilize methods such as assign, replace, and reload.