Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What's the difference between window.location and document.location?
In JavaScript, both window.location and document.location provide access to the current page's URL information, but they have subtle differences in browser compatibility and usage patterns.
The window.location Property
The window.location property is a reference to a Location object that represents the current URL of the document being displayed in that window. Since the window object is at the top of the scope chain, you can access location properties without the window prefix (e.g., location.href instead of window.location.href).
Example: Getting Current URL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Get Current URL</title>
</head>
<body>
<script>
function getURL() {
alert("The URL of this page is: " + window.location.href);
}
</script>
<button type="button" onclick="getURL();">Get Page URL</button>
</body>
</html>
When you click the button, it displays the current page URL in an alert dialog.
The document.location Property
The document.location property also returns the URL of the current document. However, its read/write capabilities vary across browsers, making it less reliable for navigation purposes.
Example: Accessing URL Properties
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document.location Properties</title>
</head>
<body>
<script>
document.write("The pathname of this file is: " + document.location.pathname + "<br>");
document.write("The Protocol used is: " + document.location.protocol + "<br>");
</script>
</body>
</html>
Navigation with document.location
You can navigate to a new URL by assigning a value to document.location or using its methods like assign().
Example: Loading a New URL
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document.location Navigation</title>
</head>
<body>
<h2>Document.location</h2>
<p>To load a new page</p>
<script>
function newPage() {
document.location.assign("https://www.tutorialspoint.com/");
}
</script>
<button type="button" onclick="newPage();">
Click to Navigate
</button>
</body>
</html>
Key Differences
| Property | Browser Compatibility | Read/Write Access | Recommended Use |
|---|---|---|---|
window.location |
Universal | Read and write in all browsers | Yes - preferred |
document.location |
Limited | Read-only in IE, read/write in Gecko browsers | No - avoid for navigation |
Best Practices
- Use
window.locationfor reliable cross-browser compatibility - Both properties reference the same Location object in modern browsers
- For navigation, prefer
window.location.href = "URL"orwindow.location.assign("URL") - Access can be shortened to just
locationsince window is global
Conclusion
While both window.location and document.location access URL information, window.location is the preferred choice due to consistent read/write support across all browsers. Use window.location for reliable navigation and URL manipulation.
2K+ Views
