JavaScript | window.location and document.location Objects - GeeksforGeeks

13 May, 2020
window.location and document.location: These objects are used for getting the URL (the current or present page address) and avert browser to a new page or window. The main difference between both is their compatibility with the browsers.
The window.location is read/write on all compliant browsers.
The document.location is read-only in Internet Explorer but read/write in Firefox, SeaMonkey that are Gecko-based browsers.
All modern browsers map document.location to the window.location but you can prefer window.location for cross-browser safety.
Syntax:
window.location.href: It returns the URL of the current working page.
window.location.hostname: It returns the domain name of web host.
window.location.pathname: It returns the path and filename of the current working page.
window.location.protocol: It returns the used protocol (http: or https:).
window.location.port(): It prints the port number.
window.location.host(): It prints host name along with port number.
window.location.assign(): It loads new document.
Example 1: This example using different properties to get different parts of URL.
<!DOCTYPE html><html lang="en">  <head>    <title>Get Different Part of a URL</title></head>  <body>    <script>          // Prints complete URL        document.write("URL IS:  "                 + window.location.href + "<br>");          // Prints hostname like local host (www.example.com)        document.write("HOSTNAME:  "                 + window.location.hostname + "<br>");          // Prints pathname like /products/find.php        document.write("PATHNAME:  "                 + window.location.pathname + "<br>");          // Prints the protocol used like http: or https:        document.write("PROTOCOL:  "                 + window.location.protocol + "<br>");          // Prints hostname with port like localhost:3000        document.write("HOSTNAME WITH PORT:  "                 + window.location.host + "<br>");          // Prints port number like 3000        document.write("PORTNUMBER:  "                 + window.location.port + "<br>");    </script></body>  </html>
Output:
URL IS: https://ide.geeksforgeeks.org/tryit.php
HOSTNAME: ide.geeksforgeeks.org
PATHNAME: /tryit.php
PROTOCOL: https:
HOSTNAME WITH PORT: ide.geeksforgeeks.org
PORTNUMBER:
Note: When you visit a specific website, it is always connected to a port. However, most browsers will not display the default port number.
Example 2: Assign or load new document.
<!DOCTYPE html><html lang="en">  <head>    <title>        Load another Resource or         document from a URL    </title>      <script>        function loadPage() {            window.location.assign(                "https://ide.geeksforgeeks.org");        }    </script></head>  <body>    <button type="button" onclick="loadPage();">        Load Page    </button></body>  </html>  
Output:
Before Clicking the Button:
After Clicking the Button:
javascript-object
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?