Browser - URL Management

About

This article shows you how to get and manipulate an URL

Type

URL object

URL web API

  • Build an URL object
const url = new URL(window.parent.location.href); // parent because this code runs in a iframe (if not delete it)
  • Print a URL properties (…host, hostname,…)
console.log("Hostname: "+url.hostname); //
console.log("Id Parameters: "+url.searchParams.get("id")); // none but it should work
url.searchParams.set("id","#123"); 
console.log("Id Parameters After Setting: "+url.searchParams.get("id")); 
  • Print
console.log("New URL: "+url.toString());

How to get the url of the actual HTML page (with Javascript)

The value is stored in the href property

  • We used window.parent because the code is run in a iframe but in a normal page, you would just use window.
console.log("URL: "+window.parent.location.href); // url
// value is `about:srcdoc` because we are in a iframe
console.log("URL in iframe: "+window.location.href);
console.log("Path: "+window.parent.location.pathname);
console.log("Host: "+window.parent.location.host); 
  • hostname - only the name of the host (ie without the port)
console.log("Hostname: "+window.parent.location.hostname); 
console.log("Anchor: "+window.parent.location.hash);  
  • port (empty string if none)
console.log("Port: "+window.parent.location.port);  
console.log("Protocol: "+window.parent.location.protocol); 
console.log("Query String: "+window.parent.location.search);

Powered by ComboStrap