JavaScript | window.location and document.location Objects

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>  

chevron_right


Output:

  • Before Clicking the Button:
  • After Clicking the Button:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.