是否可以创建位置实例？

Question

当我在控制台中输入window 时。控制台显示window 是Window 的实例。是否可以使用new Window() 创建新的窗口对象。我试过但它抛出错误 TypeError: Illegal constructor

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

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

我正在使用Chrome console。

Answer 1

尝试使用Location 操作任意URI 将不会按预期工作。 Location 对象/类型不是通用的 URI 容器，而是与 DOM 及其导航状态的特殊契约。

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

javascript 的 URI 类型

• 支持各种 URI（URL、URN、任何方案）。
• 相对 URI 解析
• 所有类都扩展了本机 String 实现。
• URI 规范 (RFC-3986) 的纯 ECMA-262 实现
• Works 客户端或服务器端，（V8 / node.js 兼容）。

Answer 2

尽管这个问题已经很老了，但仍然将答案发布为使用原生 HTML Web API 被认为是一种很好的做法。

解决方案

• HTML Web API URL 允许我们创建一个包含以下属性的 URL 对象。
• 此对象的 typescript 等效项如下所示 -

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 3

不，你不能。一个浏览器窗口有一个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 4

将window 对象想象成一个单例。您不能创建它的新实例。这意味着什么？ Window 中的新 Window 会是什么？这与Window 的location 对象类似。每个Window 都有一个location，但没有Window 可以同时出现在两个locations 中。

要修改 location 的 Window 使用：

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

要创建一个新的（子）Window——一个弹出窗口——使用window对象的open方法：

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

要更改链接的“位置”，请修改链接的href 属性。例如，要修改 HTML 链接：

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

...使用...

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

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

它甚至会在您可以监听的 URL 更改时发出 'change' 事件：

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

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

它可以在 Node 和浏览器上运行，但是由于它的体积很小，所以没有单独的 Web 下载；使用 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,
};