JS Location

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JS Location

The window.location object retrieves the current page address (URL) and redirects the browser to a new page.

The window.location object is written without the window prefix.

Some examples

  • location.href is used to return the href (URL) of the current page
  • location.hostname is used to return the domain name of the web host
  • location.pathname is used to return the path and filename of the current page
  • location.protocol returns the web protocol HTTPS (HTTP: or https:)
  • location.assign() loads a new document

Window Location Href

The window.location.href property is used to return the URL of the current page.

Example

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

Output

JavaScript

The window.location object

Window Location Hostname

The window.location.hostname property is used to return the name of the internet host (of the current page).

Example

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

Output

JavaScript

The window.location object

www.mywebhostguru.com

Window Location Pathname

The window.location.pathname property returns the pathname of the current page.

Example

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

Output

JavaScript

The window.location object

Page path is: /js/tryit.php

Window Location Protocol

The window.location.protocol property is used to return the web protocol of the page.

Example

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

Output

JavaScript

The window.location object

The page protocol is: https:

Window Location Port

The window.location.port property is used to return the number of the internet host port (of the current page).

Example

<!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 default (80 for http and 443 for https), most browsers will display 0 or nothing.</p>

<script>

document.getElementById(“demo”).innerHTML =

“The URL port number of the current page is: ” + window.location.port;

</script>

</body>

</html>

Output

JavaScript

The window.location object

Note: If the port number is default (80 for http and 443 for https), most browsers will display 0 or nothing.

Window Location Assign

The window.location.assign() method is used to loads a new document.

Example

<!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.w3schools.com“)

}

</script>

</body>

</html>

Output

JavaScript

The window.location object