JavaScript BOM window.location object
The window.location object in JavaScript's Browser Object Model (BOM) represents the current URL of the browser window. It is a crucial part of the BOM that allows developers to read and manipulate the URL of the document currently loaded in the browser.
Key Features of window.location
Accessing Current URL:
- You can retrieve the current URL using
window.location.href.
- You can retrieve the current URL using
Manipulating the URL:
- You can change the URL by setting properties of the
window.locationobject, which can navigate to different pages or reload the current page.
- You can change the URL by setting properties of the
Properties of
window.location: Thewindow.locationobject has several important properties that can be used to access different parts of the URL:href: Returns the entire URL as a string. You can also set it to navigate to a different URL.console.log(window.location.href); // "https://example.com/path" window.location.href = "https://example.com/newpage"; // Redirects to newpageprotocol: Returns the protocol used in the URL (e.g.,http:,https:).console.log(window.location.protocol); // "https:"hostname: Returns the domain name of the web host.console.log(window.location.hostname); // "example.com"port: Returns the port number used in the URL (if specified).console.log(window.location.port); // "8080" (if the URL is "https://example.com:8080")pathname: Returns the path of the URL (the part after the hostname).console.log(window.location.pathname); // "/path"search: Returns the query string part of the URL, including the question mark.console.log(window.location.search); // "?query=example"hash: Returns the anchor part of the URL (the part after the hash symbol).console.log(window.location.hash); // "#section1"
Methods of
window.location:assign(url): Loads a new document at the specified URL.window.location.assign("https://example.com/newpage");replace(url): Replaces the current document with the one at the specified URL without creating a new entry in the history stack.window.location.replace("https://example.com/anotherpage");reload(): Reloads the current URL. You can force a reload from the server by passingtrueas an argument.window.location.reload(); // Reloads the current page window.location.reload(true); // Reloads from the server
Example Usage
Here’s a simple example demonstrating how to use window.location to navigate to a new page based on user input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Window Location Example</title>
</head>
<body>
<h1>Navigate to a New Page</h1>
<input type="text" id="urlInput" placeholder="Enter a URL" />
<button id="goButton">Go</button>
<script>
document.getElementById('goButton').addEventListener('click', function() {
const url = document.getElementById('urlInput').value;
window.location.href = url; // Redirects to the entered URL
});
</script>
</body>
</html>
Summary
The window.location object is a powerful tool in the JavaScript BOM that provides a way to read and manipulate the URL of the current document. Understanding how to use it effectively allows for dynamic navigation and enhances the interactivity of web applications.