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