如何使用JS把相对地址变成绝对地址？

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9227
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

在实际项目开发的时候，可能会遇到这样的场景，知道一个相对地址，希望转换成绝对定位。例如：

• “/wordpress/?p=9227″ → “https://www.zhangxinxu.com/wordpress/?p=9227″
• “../images/zhangxinxu.png” → “https://image.zhangxinxu.com/blog/images/zhangxinxu.png”

有没有什么办法可以和快速地实现相对地址到绝对地址的转换呢？

下面介绍两个我所知道的方法。

一、new URL()方法

有时候为了方便的处理URL地址，会使用URL()方法。例如：

var myUrl = new URL('https://www.zhangxinxu.com/wordpress/?p=9227');
// 可以方便获得URL地址的各个组成部分
console.log(myUrl.host);
console.log(myUrl.path);
console.log(myUrl.search);

除了上面的URL地址拆家，URL()方法还有一个隐藏的功能，就是可以实现相对地址变成绝对地址的效果。

语法

var myUrl = new URL(url, [base])

看到后面的可选参数[base]没有，这个就可以实现相对路径变成绝对路径。

案例

var myUrl = new URL("/wordpress/?p=9227", "https://www.zhangxinxu.com");
console.log(myUrl.href);
// 结果就是本文的URL地址
// https://www.zhangxinxu.com/wordpress/?p=9227

控制台运行截图：

案例again

var myUrl = new URL("../images/zhangxinxu.png", "https://images.zhangxinxu.com/blog/css/");
console.log(myUrl.href);
// 结果是https://image.zhangxinxu.com/blog/images/zhangxinxu.png

运行结果示意：

方法封装

实际开发，base往往就是当前页面的域名地址，因此，我们可以简单封装一个方法，简化我们平时的调用，如下，大家可以随意复制粘贴使用，连版权信息都不需要加，只要买本我写的书支持下就好了：

/**
 * @description 相对路径转换成绝对路径方法
 * @author zhangxinxu(.com)
*/
var relative2absolute = function (url, base) {
    if (!base) {
        base = location.protocol + location.host;
    }
    return new URL(url, base).href;
}

个人点评

URL()方法进行相册地址到绝对地址要转换，非常方便，也非常灵活，没有任何域名的限制，属于各种场景。

但是有一个非常大的缺点，就是兼容性不太好。Edge 12+支持。

不过可以添加polyfill使支持，https://github.com/lifaon74/url-polyfill

但是显然就很啰嗦了。

而且Polyfill兼容到IE9+（绝大部分），IE10+。

如果你希望兼容性方法足够好，可以试试下面的<a>元素法。

二、a|form元素法

我们还可以借助链接元素的直接返回绝对地址的特性实现我们的需求。

例如<a>元素的href属性，或者<form>元素的action属性。

案例

直接上JavaScript代码：

var eleLink = document.createElement('a');
eleLink.href = "/wordpress/?p=9227";
console.log(eleLink.href);
// 结果就是本文的URL地址
// https://www.zhangxinxu.com/wordpress/?p=9227

控制台测试结果如下：

案例 x2

带有路径关系的地址也是类似的实现。例如：

var eleLink = document.createElement('a');
eleLink.href = "https://images.zhangxinxu.com/blog/css/" + "../images/zhangxinxu.png";
console.log(eleLink.href);
// 结果是https://image.zhangxinxu.com/blog/images/zhangxinxu.png

眼见为实，Chrome浏览器控制台console测试结果示意：

方法封装

同样的我们可以封装一个非常便捷的路径转换方法。大家可以随意复制粘贴使用，作者信息都可以不需要加，只要买本我写的书支持下就好了：

/**
 * @description 相对地址绝对地址转换方法
 * @author zhangxinxu(.com)
*/
var relative2absolute = function (url, base) {
    var ele = document.createElement('a');
    ele.href = (base || '') + url;
    return eleLink.href;
}

个人点评

借助链接元素的相对地址转换方法，其最大的优点就是兼容性非常好，即使是极低版本的IE浏览器也是支持的，例如下面在IE8浏览器下跑的结果：

至于缺点，就是需要在浏览器环境中才行。在Node.js环境下就焉了。

三、小年夜小结

今天小年夜，中午食堂吃了10个馄饨+荷包蛋（没有拍照），晚上则是整个前端组团建差不多将近30个人，去捞王吃了火锅，这个有照片。

然后写了这篇文章。

真是充实满满的一天。

对了，对于本文提到的URL()方法，更详细的内容可以参考我之前这篇文章“JS URL()和URLSearchParams() API接口详细介绍”。

本文为原创文章，欢迎分享，勿全文转载，如果实在喜欢，可收藏，永不过期，且会及时更新知识点及修正错误，阅读体验也更好。
本文地址：https://www.zhangxinxu.com/wordpress/?p=9227

（本篇完）