How do i get the Host name and path from URL using Javascript

Published October 06, 2022

In the Javascript to get current window properties we will use the Window.location. With this object we can fetch properties like host name, path, protocol etc

window.location.href to get the current page url, this will use
window.location.hostname which will returns the host/domain name of the web
window.location.pathname which will returns the path and filename of the current page
window.location.protocol this will returns the protocol of the web used (http: or https:)
window.location.assign() loads a new document

Example to get current window url using location.href:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title></title>
  <meta name="Generator" content="Cocoa HTML Writer">
 
</head>
<body>
<h2>Get URL for the Current web page/window</h2>
<p id="id_url"></p>

<script>
document.getElementById("id_url").innerHTML =
"The full URL of this page is:<br>" + window.location.href;

console.log( window.location.href);
</script>
</body>
</html>

Below example will return the hostname, path and port of the current web page/window

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title></title>
  <meta name="Generator" content="Cocoa HTML Writer">

</head>
<body>
<h2>Get URL for the Current web page/window</h2>
<p id="id_url"></p>

<script>

var data="The full URL of this page is:<br>" + window.location.href;
data=data+ "<br> <br> Host name of the Page : " +window.location.hostname;
data=data+ "<br> <br>Path of the Page : " +window.location.pathname;
data=data+ "<br> <br>Port of the page : " +window.location.port;
document.getElementById("id_url").innerHTML =data;

console.log( window.location.href);
</script>
</body>
</html>

How do i load new page when tap on button using Javascript

By using window.location.assign() property we can load new page.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title></title>
  <meta name="Generator" content="Cocoa HTML Writer">

</head>
<body>
<h2>Get URL for the Current web page/window</h2>
<p id="id_url"></p>

<input type="button" value="Load new page" onclick="newPage()">

<script>

var data="The full URL of this page is:<br>" + window.location.href;
data=data+ "<br> <br> Host name of the Page : " +window.location.hostname;
data=data+ "<br> <br>Path of the Page : " +window.location.pathname;
data=data+ "<br> <br>Port of the page : " +window.location.port;
document.getElementById("id_url").innerHTML =data;

console.log( window.location.href);
function newPage() {
  window.location.assign("https://rrtutors.com")
}
</script>
</body>
</html>

Conclusion: To get current window/web page information we will window.location object which will returns the hostname, path, port number details

Article Contributed By :

506 Views

Projects By category