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); //

• Manipulate the query string with https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
• Get a query parameter

console.log("Id Parameters: "+url.searchParams.get("id")); // none but it should work

• Set a query parameter

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);

• Path

console.log("Path: "+window.parent.location.pathname);

• host is the endpoint ie hostname and port (if not the default HTTP port)

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); 

• fragment

console.log("Anchor: "+window.parent.location.hash);  

• port (empty string if none)

console.log("Port: "+window.parent.location.port);  

• protocol

console.log("Protocol: "+window.parent.location.protocol); 

• query string ?key=value

console.log("Query String: "+window.parent.location.search);

URL tied to a memory resource such as a file

The DOM URL.createObjectURL() and URL.revokeObjectURL() methods let you create data URL strings.

More Browser / Javascript - Object URL (createObjectURL / revokeObjectURL)