在前端开发中，我们经常需要处理URL相关的问题。其中一个比较常见的需求是从相对URL获取绝对URL。本文将介绍如何通过JavaScript代码实现该功能，并解决在IE6浏览器中可能会遇到的问题。
相对URL和绝对URL
在Web开发中，URL（Uniform Resource Locator）用来标识网络上的资源。URL由两部分组成：协议名和资源地址。例如，http://www.example.com/index.html 中，http是协议名，www.example.com是主机名，index.html是资源地址。
相对URL是相对于当前页面或者基础URL的路径表达式。例如，如果当前页面的URL是 http://www.example.com/page1.html，那么相对URL "../page2.html" 表示的就是 http://www.example.com/page2.html。而绝对URL是完整的、包含协议名、主机名和资源地址的URL。
实现从相对URL获取绝对URL
为了实现从相对URL获取绝对URL的功能，我们可以使用 JavaScript 中提供的 URL 对象。URL 对象有一个 href 属性表示 URL 的完整地址。我们可以创建一个 URL 对象，然后设置其 href 属性为相对URL，最后读取其 href 属性即可获取绝对URL。
以下是一个例子：
const baseUrl = 'http://www.example.com'; const relativeUrl = '../page2.html'; const absoluteUrl = new URL(relativeUrl, baseUrl).href; console.log(absoluteUrl); // 输出 http://www.example.com/page2.html
上面的代码中，我们先定义了基础URL baseUrl 和相对URL relativeUrl。然后，我们使用 new URL() 构造函数创建一个 URL 对象，并将其参数分别设置为相对URL和基础URL。最后，读取 URL 对象的 href 属性即可获取绝对URL。
解决IE6浏览器的问题
在IE6浏览器中，如果相对URL包含 "../"，则从相对URL获取绝对URL可能会出现错误。例如，如果当前页面的URL是 http://www.example.com/folder1/page1.html，相对URL为 "../../folder2/page2.html"，那么在IE6中获取到的绝对URL会变成 http://www.example.com/folder2/page2.html/page1.html，这显然是错误的。
解决这个问题的方法是使用 document.createElement('a') 创建一个 a 标签对象，然后设置其 href 属性为相对URL，最后读取其 href 属性即可获取正确的绝对URL。
以下是修改后的例子：
-- -------------------- ---- ------- -------- ----------------------- ------------ - ----- --- - --------------------------------------------- ----- ---- - -------------------------- --------- - -------- --------------------------- ----- - - ----------------------- ------ - ------------ ------ ------- - ----- ------- - -------------------------------------------- ----- ----------- - --------------------------- ----- ----------- - ----------------------- ------------- ------------------------- -- -- -----------------------------------------
上面的代码中，我们定义了一个新的 getAbsoluteUrl() 函数，使用 document.implementation.createHTMLDocument() 创建一个空的文档对象，然后创建一个 base 标签和一个 a 标签，并依次将它们添加到文档对象的头部。最后，设置 a 标签的 href 属性为相对URL，读取其 href 属性即可获取正确的绝对URL。
总结
在本文中，我们介绍了如何通过JavaScript代码从相对URL中获取绝对URL。同时，我们还解决了在IE6浏览器中可能会遇到
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12082
