JavaScript Window Location

❮ Previous Next ❯

The window.location object helps you discover the web page's current address (URL) and lets you direct the browser to another page.

Window Location

You can write the location object without using the "window" prefix.

Some examples:

The code window.location.href gives the web address (URL) of the page you are currently on.
The code window.location.hostname gives the domain name of the web host.
The code window.location.pathname gives the path and filename of the page you are currently on.
The code window.location.protocol gives you the web protocol being used, which could be either http: or https:.
The code `window.location.assign()` is used to open a new document.

Window Location Href

The window.location.href tells you the web address of the page you're currently on.

Window Location Hostname

The window.location.hostname feature gives the internet host's name for the current webpage.

Window Location Pathname

The window.location.pathname property gives the pathname of the page you are currently on.

Window Location Protocol

The window.location.protocol property tells you the web protocol of the page.

Window Location Port

The window.location.port tells you the port number of the current webpage's internet host.

Typically, web browsers don't show the standard port numbers (80 for http and 443 for https).

Window Location Assign

The code window.location.assign() is used to open a new web page.

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript</h2>
    <h3>The window.location object</h3>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = "The full URL of this page is: <br> " + window.location.href;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript</h2>
    <h3>The window.location object</h3>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = "Page hostname is: " + window.location.hostname;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript</h2>
    <h3>The window.location object</h3>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = "Page path is: " + window.location.pathname;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript</h2>
    <h3>The window.location object</h3>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = "The page protocol is: " + window.location.protocol;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript</h2>
    <h3>The window.location object</h3>
    <p id="demo"></p>
    <p>
      <b>Note: </b>If the port number is set to its default value (80 for HTTP and 443 for HTTPS), many browsers will show either 0 or nothing.
    </p>
    <script>
      document.getElementById("demo").innerHTML = "The URL port number of the current page is: " + window.location.port;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript</h2>
    <h3>The window.location object</h3>
    <input type="button" value="Load new document" onclick="newDoc()">
    <script>
      function newDoc() {
        window.location.assign("https://www.propertutorials.com")
      }
    </script>
  </body>
</html>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics