URL : Object

constructor

An object that represents a web address. Also provides methods to generate a url for a Blob so locally generated content can be passed to APIs that accept urls.

Spec

Constructors

new URL(url : String) : URL

Creates a new URL object for the provided url.

Example:

const url = new URL('http://user:pass@example.com:8080/resource/path?q=1#hash');

console.log('href:', url.href);
console.log('protocol:', url.protocol);
console.log('username:', url.username);
console.log('password:', url.password);
console.log('host:', url.host);
console.log('hostname:', url.hostname);
console.log('port:', url.port);
console.log('pathname:', url.pathname);
console.log('search:', url.search);
console.log('hash:', url.hash);

Run

Results:

Spec

new URL(relativeUrl : String, base : String) : URL

Creates a new URL for the relativeUrl using base as the base url.

Example:

const url = new URL('../other?q=2#hash2',
                    'http://user:pass@example.com:8080/res/path/file?q=1#hash');

console.log('href:', url.href);
console.log('protocol:', url.protocol);
console.log('username:', url.username);
console.log('password:', url.password);
console.log('host:', url.host);
console.log('hostname:', url.hostname);
console.log('port:', url.port);
console.log('pathname:', url.pathname);
console.log('search:', url.search);
console.log('hash:', url.hash);

Run

Results:

Spec

Instance Properties

hash : String

The hash portion of the URL.

Example:

const url = new URL('http://example.com/path#hash');
console.log(url.hash);

url.hash = 'newhash';
console.log(url);

Run

Results:

Spec

host : String

The host portion of the URL.

Example:

const url = new URL('http://example.com:8080/path');
console.log(url.host);

url.host = 'javascripture.com';
console.log(url);

Run

Results:

Spec

hostname : String

The hostname portion of the URL.

Example:

const url = new URL('http://example.com:8080/path');
console.log(url.hostname);

url.hostname = 'javascripture.com';
console.log(url);

Run

Results:

Spec

href : String

The effective value of the URL. Set this to replace the entire value.

Example:

const url = new URL('http://user:pass@example.com:8080/resource/path?q=1#hash');
console.log(url.href);

url.href = 'http://www.javascripture.com/URL#href';
console.log(url);

Run

Results:

Spec

origin : String readonly

The origin of the URL.

Example:

const url = new URL('http://user:pass@example.com:8080/resource/path?q=1#hash');
console.log(url.origin);

Run

Results:

Spec

password : String

The password portion of the URL.

Example:

const url = new URL('http://user:pass@example.com');
console.log(url.password);

url.password = 'foo';
console.log(url);

Run

Results:

Spec

pathname : String

The path portion of the URL.

Example:

const url = new URL('http://example.com/resource/path');
console.log(url.pathname);

url.pathname = 'foo';
console.log(url);

Run

Results:

Spec

port : String

The port portion of the URL.

Example:

const url = new URL('http://example.com:8080/path');
console.log(url.port);

url.port = 3000;
console.log(url);

Run

Results:

Spec

protocol : String

The protocol portion of the URL.

Example:

const url = new URL('http://example.com/path');
console.log(url.protocol);

url.protocol = 'https';
console.log(url);

Run

Results:

Spec

search : String

The search query portion of the URL. See also searchParams.

Example:

const url = new URL('http://example.com/path?q=1');
console.log(url.search);

url.search = 'foo=bar';
console.log(url);

Run

Results:

Spec

searchParams : URLSearchParams

Helper object to manipulate the search portion of the URL.

Example:

const url = new URL('http://example.com/path?a=1&b=2');

console.log(url.searchParams.get('a'));
console.log(url.searchParams.get('b'));

for (const [k, v] of url.searchParams) {
  console.log(k, v);
}

Run

Results:

Spec

username : String

The username portion of the URL.

Example:

const url = new URL('http://user:pass@example.com');
console.log(url.username);

url.username = 'foo';
console.log(url);

Run

Results:

Spec

URL Methods

createObjectURL(blob : Blob) : String

Creates a url for the specified blob that can be passed to methods that expect a url. When done with the returned url, call revokeObjectURL() to free the resources associated with the created url.

Example:

<!-- Creates a Worker using a local script instead of a remote url -->
<script id='code' type='text/plain'>
  postMessage('foo');
</script>
<script>
  var code = document.getElementById('code').textContent;
  var blob = new Blob([code], { type: 'application/javascript' });
  var url = URL.createObjectURL(blob);
  var worker = new Worker(url);
  URL.revokeObjectURL(url);

  worker.onmessage = function(e) {
    console.log('worker returned: ', e.data);
  };
</script>

Run

Results:

Spec

revokeObjectURL(url : String) : undefined

Frees the resources associated with the url created by createObjectURL().

Example:

<!-- Creates a Worker using a local script instead of a remote url -->
<script id='code' type='text/plain'>
  postMessage('foo');
</script>
<script>
  var code = document.getElementById('code').textContent;
  var blob = new Blob([code], { type: 'application/javascript' });
  var url = URL.createObjectURL(blob);
  var worker = new Worker(url);
  URL.revokeObjectURL(url);

  worker.onmessage = function(e) {
    console.log('worker returned: ', e.data);
  };
</script>

Run

Results:

Spec

home license contribute feedback toggle light/dark mode