JavaScript WorkerLocation href Property

What You’ll Learn

The href property of a WorkerLocation object returns a string containing the serialized URL for the worker’s location. Learn self.location.href, how it differs from pieces like host, and how blob workers expose blob: URLs—with five examples and try-it labs.

Introduction

Inside a Web Worker, self.location is a WorkerLocation for the worker script URL. href is the complete serialized form of that URL—the whole address as one string.

MDN’s classic idea: for a worker loaded from an https docs URL, location.href returns that full URL string. In our try-it labs, blob workers return a blob:… URL instead.

Understanding the href Property

A read-only instance property on WorkerLocation that returns the serialized URL of the worker’s location as a string.

• Value — a string (the full worker script URL).
• Synonym — WorkerLocation.toString() returns the same serialized URL.
• Access — self.location.href or location.href inside the worker.
• Workers only — not available on the main document thread.
• Baseline Widely available on MDN (since July 2015).

📝 Syntax

Read the property inside a worker script:

const result = location.href;
// full serialized worker URL string

Value

A string.

Typical pattern (MDN idea)

// Inside a Web Worker
const result = location.href;
// e.g. "https://developer.mozilla.org/en-US/docs/Web"
self.postMessage(result);

⚖️ href vs Related Ideas

Examples Gallery

Examples follow MDN WorkerLocation.href. Labs use blob workers so you always get a concrete full URL string.

const result = location.href;
self.postMessage(result);

blob:http://localhost:3002/…

self.postMessage({
  href: location.href,
  isBlob: location.href.indexOf("blob:") === 0,
  hostnameEmpty: location.hostname === ""
});

isBlob: true
hostnameEmpty: true
href: blob:http://…

const u = new URL(location.href);
self.postMessage({
  href: location.href,
  protocol: u.protocol,
  pathname: u.pathname
});

protocol: blob:
pathname: /…
href: blob:…

// Worker
self.postMessage(location.href);

// Main
worker.onmessage = (e) => {
  console.log("worker:", e.data);
  console.log("page:", location.href);
};

worker: blob:http://localhost:3002/…
page: http://localhost:3002/…

const href = location.href;
self.postMessage({
  href,
  kind: href.indexOf("blob:") === 0 ? "blob" : "other"
});

kind: blob

🚀 Common Use Cases

• Log the exact worker script URL for debugging.
• Detect blob vs http(s) workers from one string.
• Parse the worker URL with new URL(location.href).
• Send the worker URL to the main thread for diagnostics panels.
• Confirm a worker was started from the URL you intended.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Only available in Web Workers (WorkerLocation / self.location).
• Read-only full URL string; toString() is a synonym.
• Not the same as window.location.href on the page.
• Related learning: hostname, host, hash, Worker().

💡 Best Practices