Can I create an instance of Location?

Question

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

My question is related to the Location object. can i create a new object using Location ? I need it so that I can apply the method available for the Location object to my links.

I tried to access the Location object, but did not succeed.

I am using Chrome console .

Answer 1

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

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

URI type for javascript

• Supports all kinds of URIs (URL, URN, any scheme).
• Relative URI Resolution
• All classes extend their own implementation of String.
• Net implementation of the URI specification ECMA-262 (RFC-3986)
• A client or server is running (compatible with V8 / node.js).

Answer 2

No, you can’t. There is one instance of window in the browser window , and the window has one location . Trying to create multiple instances of window or window.location would show conceptual errors.

If I understand what you want to do correctly, you must create an anchor element that will work 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'); 

Answer 3

Although the question is quite old, posting the answer anyway using native HTML APIs is considered good practice.

Decision

• The HTML Web API URL allows us to create a URL object that has the following properties.
• the equivalent of this typescript object is as follows:

 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 the 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 compatibility before use.

I hope this solution will be useful to you.

Answer 4

Think of the window object as a singleton. You cannot create new instances. What does it mean? What will be the new window inside a window ? It is similar to the location object of a window object. Each window has a location , but without a window can be two location once.

To change the location for window , use:

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

To create a new (child) window - a popup window - use the open method of the window object:

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

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

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

... use ...

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

Answer 5

No , you cannot create new Location objects yourself.

However, you can get closer. I built a small (~ 1kB) library that offers a custom Location function that works the way you would expect from the standard Location function:

ulocation

With it, you can create new location objects, such as:

 var x = new Location('https://joe: [e-mail] :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 is very similar to the window.location object or bindings. If you install href , all other fields will be updated 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 generates a 'change' event whenever a URL changes that you can listen to:

 x.on('change', function(){ console.info(this.href); }) x.href= 'https://stackoverflow.com' // > 'https://stackoverflow.com' 

It works on Node as well as in the browser, but because of this tiny size, there is no separate download on the network; include it in your kit using Webpack or Browserify.

Answer 6

Depending on what you need your Location , you can do. I used the code below 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, };