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(         }     </script> </head>   <body>     <button type="button" onclick="loadPage();">         Load Page     </button> </body>   </html>  |
Output:
- Before Clicking the Button:
- After Clicking the Button:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
