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

这篇文章发布于 2020年01月17日,星期五,23:14,归类于 JS实例。 阅读 22136 次, 今日 4 次 12 条评论

 

文章头图

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

  • “/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

控制台运行截图:

URL()方法相对地址转换成绝对地址运行截图

案例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

运行结果示意:

URL地址变化截图

方法封装

实际开发,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+支持。

URL()兼容性截图

不过可以添加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浏览器下跑的结果:

IE8浏览器下转绝对地址效果

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

三、小年夜小结

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

捞王火锅

然后写了这篇文章。

真是充实满满的一天。

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

(本篇完)

分享到:


发表评论(目前12 条评论)

  1. adagou说道:

    location.protocol + location.host
    一开始以为是错的,结果没毛病~

  2. MO说道:

    我试试看会不会有头像~~

  3. gaogeek说道:

    var relative2absolute = function (url, base) {
    if (!base) {
    //base = location.protocol + location.host;
    base = location.origin; // 这样就可以了吧
    }
    return new URL(url, base).href;
    }

  4. BLANK说道:

    /**
    * @description 相对地址绝对地址转换方法
    * @author zhangxinxu(.com)
    */
    var relative2absolute = function (url, base) {
    var ele = document.createElement(‘a’);
    ele.href = (base || ”) + url;
    return eleLink.href;
    }
    这个例子中的 eleLink 变量应该是 ele

  5. ccyu220说道:

    学到了

  6. webster说道:

    每次看都有新发现

  7. 复古先生说道:

    我也想要专属头像,麻烦张大大帮我换成这个头像: https://avatars0.githubusercontent.com/u/16750797?s=88&v=4

  8. viko16说道:

    还有一种方式是 元素?

  9. yesSakuras说道:

    开头的myUrl.path我输出是undefined,我查了一下文档URL对象是pathname
    https://developer.mozilla.org/zh-CN/docs/Web/API/URL

  10. 崮生说道:

    微信小程序了没有URL对象(¬_¬ )