Is possible to create instance of Location?

Question

When I type window in console. console show that window is instance of Window. Is it possible to create new window object using new Window(). I tried it but it throwing error TypeError: Illegal constructor

My Question is related to Location object. can I create a new object using Location? I need it so that I can apply method available on location object to my links.

I was trying to access Location object but no success.

I am using Chrome console.

Maybe there's another way that doesn't involve replicating an object. Can you tell us what method you needed? — IOrlandoni, Oct 01 '12 at 20:49
Perhaps [creating-a-new-location-object-in-javascript](http://stackoverflow.com/questions/3213531/creating-a-new-location-object-in-javascript) — mplungjan, Oct 01 '12 at 20:54
I want create Instance of location object. for example if I have link = example.com/?q=12&er=56#test; I want to create a location object. I so that I can manipulate the link above. I know I can use reg expression to manipulate link. I was curious to know if creation of instance of Location possible — Anoop, Oct 01 '12 at 20:56
@Shusl This simply *not* work as desired in this case. The Location object is *not* a general URI container, but is rather a special contract with the DOM and its navigation state. Consider asking the *real question* next time, like: "How can URIs be manipulated in JavaScript?" — , Oct 01 '12 at 20:57
it's a great shame that there isn't a JS mandatory URI class :( — Alnitak, Oct 01 '12 at 21:00
I think it is not possible but you can have all location properties and method see SO thread http://stackoverflow.com/questions/3213531/creating-a-new-location-object-in-javascript — Anoop, Oct 01 '12 at 21:01

saml · Answer 1 · 2012-10-01T21:02:21.003

No, you can't. A browser window has one instance of window and a window has one location. Trying to create multiple instances of window or window.location would seem indicative of conceptual errors.

If I'm understanding what you want to do correctly, you should create an anchor element manipulate that with javascript:

var url = document.createElement('a');
url.href = "http://www.example.com/some/path?name=value#anchor";
var protocol = url.protocol;
var hash = url.hash;

alert('protocol: ' + protocol);
alert('hash: ' + hash);

Or, if you already have an anchor, you can use

var url = document.getElementById('myanchorid');

Good answer. So an anchor is effectively a Location of sorts. — Stijn de Witt, Jan 21 '17 at 20:06

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

Attempting to use Location to manipulate arbitrary URIs will not work as desired. The Location object/type is not a general URI container, but is rather a special contract with the DOM and its navigation state.

I found this URI JavaScript type by webr3 via google, YMMV:

URI Type for javascript

Supports all kinds of URI (URL, URN, any scheme).

Relative URI Resolution

All classes extend the native String implementation.

Pure ECMA-262 implementation of URI spec (RFC-3986)

Works Client or Server side, (V8 / node.js compatible).

score 5 · Answer 3 · answered Nov 24 '17 at 14:40

Though the question is quite old, posting the answer anyway as using native HTML Web APIs is considered to be a good practice.

Solution

The HTML Web API URL allows us to create a URL object which has following properties in it.
The typescript equivalent of this object looks like this -

interface URL {
    hash: string;
    host: string;
    hostname: string;
    href: string;
    readonly origin: string;
    password: string;
    pathname: string;
    port: string;
    protocol: string;
    search: string;
    username: string;
    readonly searchParams: URLSearchParams;
    toString(): string;
}

Example

As an example,

var url = new URL('http://localhost:8081/route1/route2?q=test#route3/route4');

Gives you following object-

{
    hash: "#route3/route4"
    host: "localhost:8081"
    hostname: "localhost"
    href: "http://localhost:8081/route1/route2?q=test#route3/route4"
    origin: "http://localhost:8081"
    password: ""
    pathname: "/route1/route2"
    port: "8081"
    protocol: "http:"
    search: "?q=test"
    searchParams: URLSearchParams {}
    username: ""
}

Compatibility Check

Check the compatibility before using.

I hope this solution is useful for you.

Oliver Moran · Answer 4 · 2012-10-01T21:03:35.333

Imagine the window object as a singleton. You cannot create a new instances of it. What would it mean? What would a new Window inside a Window be? It's similar with the location object of a Window. Each Window has a location, but no Window can be in two locations at once.

To modify the location of a Window use:

window.location.href = "http://www.google.com";

To create a new (child) Window — a pop-up window — use the open method of the window object:

window.open('http://www.example.com');

To change the "location" of a link, modify the href attribute of the link. For example, to modify the HTML link:

<a href="http://www.google.com" id="mylink">Visit Website</a>

... use ...

document.getElementById("mylink").href = "http://www.yahoo.com";

score 1 · Answer 5 · answered Jan 25 '17 at 21:43

No, you can't create new Location objects yourself.

However, you can get pretty close. I built a small (~1kB) library that offers a custom Location function that works like you would expect the standard Location function to do:

ulocation

With it you can create new location objects like this:

var x = new Location('https://joe:secret@example.com:8080/path?q=test#hash');
console.info(x.protocol);  // > 'https:'
console.info(x.hostname);  // > 'example.com'
console.info(x.port);      // > '8080'
console.info(x.pathname);  // > '/path'
console.info(x.search);    // > '?q=test'
console.info(x.hash);      // > '#hash'

The created location object works very similar to the window.location object or to anchors. If you set the href, all other fields update automatically:

x.href = 'http://www.example.org/wow'
console.info(x.protocol);  // > 'http:'
console.info(x.hostname);  // > 'www.example.org'
console.info(x.port);      // > ''
console.info(x.pathname);  // > '/wow'
console.info(x.search);    // > ''
console.info(x.hash);      // > ''

It even emits a 'change' event whenever the URL changes that you can listen for:

x.on('change', function(){
  console.info(this.href);
})

x.href= 'https://stackoverflow.com'  // > 'https://stackoverflow.com'

It works on Node as well as on the browser but due to it's tiny size there is no separate web download; include it in your bundle using Webpack or Browserify.

Downvoters, care to comment? Lost 2 votes for no reason? – Stijn de Witt Nov 08 '17 at 23:05 — Stijn de Witt, Nov 08 '17 at 23:05

score 0 · Answer 6 · answered May 28 '19 at 11:31

Depending on what you need your Location to do you can. I used below code to create a Location for a unit test.

const windowLocation: Location = {
    host: 'localhost:4200',
    protocol: 'http:',
    ancestorOrigins: null,
    hash: null,
    href: null,
    hostname: null,
    origin: null,
    pathname: null,
    port: null,
    search: null,
    assign: null,
    reload: null,
    replace: null,
};

Is possible to create instance of Location?

6 Answers6

Solution

Example

Compatibility Check

ulocation

Linked