这篇文章发布于 2020年01月17日,星期五,23:14,归类于 JS实例。 阅读 25181 次, 今日 4 次 12 条评论
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
(本篇完)
- 实现a元素href URL链接自动刷新或新窗口打开 (0.425)
- JS获取上一访问页面URL地址document.referrer实践 (0.387)
- 小tips: 页面链接跳转历史URL不记录的兼容处理 (0.387)
- 一言难尽的registerProtocolHandler()方法 (0.309)
- HTML rel属性值释义大全 (0.232)
- link rel=alternate网站换肤功能最佳实现 (0.232)
- 详细介绍HTML favicon尺寸 格式 制作等相关知识 (0.232)
- 利用废弃的html rel import实现页面include功能 (0.232)
- 聊聊Web网页中资源加载的优先级 (0.232)
- 本地开发设置个区分明显的favicon吧~ (0.116)
- 我是如何理解"Another JavaScript quiz"中的题目 (RANDOM - 0.012)
location.protocol + location.host
一开始以为是错的,结果没毛病~
我试试看会不会有头像~~
var relative2absolute = function (url, base) {
if (!base) {
//base = location.protocol + location.host;
base = location.origin; // 这样就可以了吧
}
return new URL(url, base).href;
}
/**
* @description 相对地址绝对地址转换方法
* @author zhangxinxu(.com)
*/
var relative2absolute = function (url, base) {
var ele = document.createElement(‘a’);
ele.href = (base || ”) + url;
return eleLink.href;
}
这个例子中的 eleLink 变量应该是 ele
学到了
每次看都有新发现
我也想要专属头像,麻烦张大大帮我换成这个头像: https://avatars0.githubusercontent.com/u/16750797?s=88&v=4
自己去gravatar网站注册上传头像,在任意wordpress平台发布评论时候会自动显示这个头像。
还有一种方式是 元素?
开头的myUrl.path我输出是undefined,我查了一下文档URL对象是pathname
https://developer.mozilla.org/zh-CN/docs/Web/API/URL
微信小程序了没有URL对象(¬_¬ )
可以给我设置个专属头像吗