
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
What's the difference between window.location and document.location?
The window.location property
The location property of a window (i.e. window.location) is a reference to a Location object; it represents the current URL of the document being displayed in that window.
Since window object is at the top of the scope chain, so properties of the window.location object can be accessed without the window prefix. For example window.location.href can be written as location.href. The following section will show you how to get the URL of page as well as hostname, protocol, etc. using the location object property of the window object.
You can use the window.location.href property to get the entire URL of the current page.
Example
Following example demonstrates the usage of window.location.href to get the URL of page −
<!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>
On executing the above program, it will display a button saying Get Page URL. On clicking this button, the URL of the current page will be displayed. If we click on the button mentioned as Get Page URL, we will get the output as current URL.
The document.location property
This is a read-only property which returns the URL of the current document. Following is an example of the document.location property in JavaScript −
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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>
Loading an URL using document.location
To make the document.location to load a URL, it should be assigned to a string and then the URL in the string will be loaded. To assign or load by using a new document, the following example can be used.
Example
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document.location </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 </button> </body> </html>
Difference Between window.location & document.location
Both the objects window.location and document.location are used for getting the URL, but the difference is −
- The window.location is read and write in all browser
- Whereas, document.location is read-only in Internet Explorer and read/write in Gecko-based browsers.
- Related Articles
- What is the difference between $(window).load() and $(document).ready() functions in jQuery?
- How To Change the Nginx Web Document Location on Ubuntu 16.04
- How to use Push-Location and Pop-Location command in PowerShell?
- What are villi? What is their location and function?
- The simplest way to get the user's current location on Android
- How to copy items from one location to another location using PowerShell?
- How to use Location API in Android to track your current location?
- HTML Location assign( ) Method
- JavaScript Location protocol Property
- 8085 program to move blocks of bits from source location to a destination location
- How to use Location API in Android to track your current location using Kotlin?
- Android GPS, Location Manager tutorial
- HTML DOM KeyboardEvent location Property
- HTML DOM Location hash Property
- HTML DOM Location host Property
- HTML DOM Location hostname Property
