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 :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

26 Views