javascript - 是否有一种标准的方法来获取类似于 image.src 工作方式的完整 URL

Question

我有一个相对、绝对和完全限定的 URL，我想将其转换为完全限定的 URL。我可以像这样滥用 img 标签来做到这一点

[
   "someFolder/someFile.foo",                       // relative
   "/someRootFolder/someFile.foo",                  // absolute
   "https://somedomain.com/someFolder/someFile.foo", // FQ
].forEach(path => {
  var img = new Image();
  img.src = path;
  console.log(img.src);  // returns FQ for all URLs;
});

如果你运行它，结果是

https://stacksnippets.net/someFolder/someFile.foo
https://stacksnippets.net/someRootFolder/someFile.foo
https://somedomain.com/someFolder/someFile.foo

滥用 Image 来做这件事似乎是错误的。首先它是一个图像标签，我的 URL 与图像无关，其次我不想触发网络请求。

URL 不起作用，因为它在前 2 个 URL 上都会失败

Uncaught TypeError: Failed to construct 'URL': Invalid URL

我想也许 window.location 会有一个函数 getURL 或者你可以传递路径的东西，它需要它为 image.src 做的任何事情，但我不知道在 MDN 上看不到任何东西.

是否有另一种方式同样简单(1/2 行)但不使用图片标签且不会引起网络请求？

Answer 1

这通常是通过 <a> 完成的标签。

[
   "someFolder/someFile.foo",                       // relative
   "/someRootFolder/someFile.foo",                  // absolute
   "http://somedomain.com/someFolder/someFile.foo", // FQ
].forEach(path => {
  let a = document.createElement('a');
  a.href = path;
  console.log(a.href);  // returns FQ for all URLs;
});

与 <img> 相比，它还有其他优势因为它包含一些 window.location喜欢属性:

喜欢hash , pathname , path , origin ，也许还有其他我忘记了。

[
   "someFolder/someFile.foo#hi",                       // relative
   "/someRootFolder/someFile.foo#hi",                  // absolute
   "http://somedomain.com/someFolder/someFile.foo#hi", // FQ
].forEach(path => {
  let a = document.createElement('a');
  a.href = path;
  console.log(a.pathname, a.origin, a.host, a.hash);  // and maybe some others
});