7

当我输入window控制台时。控制台显示window是Window. 是否可以使用new Window(). 我试过了，但它抛出错误TypeError: Illegal constructor

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

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

我正在使用Chrome console.

4

6 回答 6

5

尝试使用Location来操作任意 URI 将无法正常工作。Location对象/类型不是一般的URI 容器，而是与 DOM 及其导航状态的特殊约定。

我通过谷歌 YMMV找到了 webr3 的这个 URI JavaScript 类型：

JavaScript 的 URI 类型

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

尽管这个问题已经很老了，但无论如何将答案发布为使用本机 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: ""
}

兼容性检查

使用前请检查兼容性。

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

于 2017-11-24T14:40:01.887 回答
4

不，你不能。一个浏览器窗口有一个 的实例，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');

​</p>

于 2012-10-01T20:50:56.727 回答
1

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

修改location一个Window用途：

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

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

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";
于 2012-10-01T20:56:09.960 回答
1

不，您不能自己创建新Location对象。

但是，您可以非常接近。我构建了一个小型 (~1kB) 库，它提供了一个自定义Location函数，其工作方式与您期望的标准Location函数一样：

外置

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

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'它甚至会在您可以侦听的 URL 更改时发出事件：

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

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

它可以在 Node 和浏览器上运行，但是由于它的体积很小，所以没有单独的 Web 下载；使用 Webpack 或 Browserify 将它包含在你的包中。

于 2017-01-25T21:43:08.430 回答
0

根据您需要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,
};
于 2019-05-28T11:31:30.120 回答