The URL in the browser

Browser - URL Management


This article shows you how to get and manipulate an URL


URL object


  • 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
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: "; 
  • 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: ";

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)

Recommended Pages
Chrome Devtool Xhr Fetch Request
Browser - Web API - Fetch function

The fetch function is part of the web api function and is a AJAX call. It's one of the possibilities to fetch a resource. XMLHttpRequest (XHR) The fetch function returns a promise as response. The Fetch...
Chrome Devtool Xhr Fetch Request
Browser - XMLHttpRequest (XHR) API

The XMLHttpRequest is a web api function that performs an resource fetch with an Aysnchronous HTTP request XMLHttpRequestAPIAJAX programmingfetch API The status of an XHR request. Value Constant...
Browser / Javascript - Object URL (createObjectURL / revokeObjectURL)

The ObjectUrl is an object that represents the data URL strings. The javascript browser api function URL.createObjectURL creates an ObjectUrl that represents a data uri that can then be passed as...
Javascript - Web API (Browser Builtin API )

The Web API is a collection of javascript function (API) that a browser implements. It implements: principally the API of the DOM. and others specific browser function ... This is...
Web - URL

An Uniform Resource Locator (URL) is a universal identifier for a resource. Because the resource can be created dynamically, an URL is also logically a request. It's the string that is understood by...

Share this page:
Follow us:
Task Runner