Question

我有一个相对的，绝对的和完全限定的网址，我希望将其转换为完全限定的网址。我可以通过滥用像这样的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个网址上失败

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

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

另一种方式是否同样简单（1/2行）但不使用图像标记并且不会引起网络请求？

Answer 1

这通常使用<a>代码完成。

＆＃13;

[
   "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;
});

＆＃13;

与<img>相比，它还具有其他优势，因为它包含一些window.location类似的属性：

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

＆＃13;

[
   "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
});

＆＃13;

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

1 个答案: