Question

在控制台中输入window时。控制台显示window是Window的实例。是否可以使用new Window()创建新的窗口对象。我试了但是它抛出错误 TypeError：非法构造函数

我的问题与Location对象有关。我可以使用Location创建新对象吗？我需要它，以便我可以将location对象上可用的方法应用于我的链接。

我试图访问Location对象但没有成功。

我正在使用Chrome console。

Answer 1

不，你不能。浏览器窗口有一个window实例，窗口有一个location。尝试创建window或window.location的多个实例似乎表明存在概念错误。

如果我理解你想要正确做什么，你应该创建一个anchor元素用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);

或者，如果您已有锚，则可以使用

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

Answer 2

尝试使用Location来操纵任意URI将不按需运行。 Location对象/类型不是一般URI容器，而是具有DOM及其导航状态的特殊合同。

我通过谷歌，YMMV找到了这个URI JavaScript type by webr3：

javascript的URI类型


支持各种URI（URL，URN，任何方案）。

相对URI解析

所有类都扩展了本机String实现。

URI规范的纯ECMA-262实现（RFC-3986）

Works Client或Server端，（V8 / node.js兼容）。

Answer 3

虽然这个问题已经过时了，但无论如何使用原生HTML Web API发布答案都被认为是一种很好的做法。

解决方案

HTML Web API URL允许我们创建一个URL对象，其中包含以下属性。
此对象的打字稿等价物如下所示 -

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;
}

实施例

举个例子，

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

为您提供以下对象 -

{
    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。

我希望这个解决方案对你有用。

Answer 4

想象一下window对象作为单身人士。您无法创建它的新实例。这是什么意思？ Window内的新Window会是什么？它与location的{{1}}对象类似。每个Window都有Window，但location不能同时包含两个Window。

修改location使用的location：

Window

要创建新的（子）window.location.href = "http://www.google.com"; - 弹出窗口 - 请使用Window对象的open方法：

window

要更改链接的“位置”，请修改链接的window.open('http://www.example.com');属性。例如，要修改HTML链接：

href

...使用......

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

Answer 5

否，您无法自行创建新的Location个对象。

然而，你可以非常接近。我构建了一个小型（~1kB）库，它提供了一个自定义Location函数，其功能与标准Location函数一样：

ulocation

有了它，你可以像这样创建新的位置对象：

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'

创建的位置对象与window.location对象或锚点的工作方式非常相似。如果您设置href，则所有其他字段都会自动更新：

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);      // > ''

每当您可以收听的网址发生变化时，它甚至会发出'change'事件：

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

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

它既适用于Node，也适用于浏览器，但由于它的体积很小，因此没有单独的网页下载;使用Webpack或Browserify将它包含在您的包中。

Answer 6

根据您需要的Location来决定。我使用以下代码为单元测试创建了Location。

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,
};

可以创建Location的实例吗？

6 个答案:

解决方案

实施例

兼容性检查

ulocation