JavaScript将相对地址转换为绝对地址示例代码


Posted in Javascript onJuly 19, 2013

在看LABjs源代码时,发现里面有个将相对地址转为绝对地址的函数,将其拿出纪录如下:

function canonical_uri(src, base_path) 
{ 
var root_page = /^[^?#]*\//.exec(location.href)[0], 
root_domain = /^\w+\:\/\/\/?[^\/]+/.exec(root_page)[0], 
absolute_regex = /^\w+\:\/\//; // is `src` is protocol-relative (begins with // or ///), prepend protocol 
if (/^\/\/\/?/.test(src)) 
{ 
src = location.protocol + src; 
} 
// is `src` page-relative? (not an absolute URL, and not a domain-relative path, beginning with /) 
else if (!absolute_regex.test(src) && src.charAt(0) != "/") 
{ 
// prepend `base_path`, if any 
src = (base_path || "") + src; 
} 
// make sure to return `src` as absolute 
return absolute_regex.test(src) ? src : ((src.charAt(0) == "/" ? root_domain : root_page) + src); 
}

如当前页面地址为:http://www.inspurstb.com/hzt/index.html
则canonical_uri("scy.js")返回http://www.inspurstb.com/hzt/scy.js

用Javascript将相对路径地址,转换为绝对路径

1)使用Image, 经测试会发送一个Aborted的请求,并且IE6不支持, 将new Image改成document.createElement_x_x_x('IMG')也是一样的;测试应该不喜欢这个方案;

function getAbsoluteUrl(url){ 
var img = new Image(); 
img.src = url; // 设置相对路径给Image, 此时会发送出请求 
url = img.src; // 此时相对路径已经变成绝对路径 
img.src = null; // 取消请求 
return url; 
} 
getAbsoluteUrl("showroom/list");

2)使用Anchor(链接),不会发出任何请求,只会在加入DOM时产生请求,但是IE6也不支持
function getAbsoluteUrl(url){ 
var a = document.createElement_x_x_x('A'); 
a.href = url; // 设置相对路径给Image, 此时会发送出请求 
url = a.href; // 此时相对路径已经变成绝对路径 
return url; 
} 
getAbsoluteUrl("showroom/list");

3)使用JavaScript: 实现起来比较复杂,这里有一个例子: https://gist.github.com/1088850

最终使用的是option 2,

由此可变,用原生态的方法访问所有的Image, Anchor时,返回的都是绝对路径,此时如果想返回原来的相对路径,可以用查询DOM的方法,如jQuery的.attr()方法:

console.log($anchor[0]["href"]); //返回绝对路径,jQuery对象实质上都是数组,即使只有一个,因此使用[0]可以访问到原生态的对象,然后取"href";
console.log($anchor.attr("href")); //返回原始路径

Javascript 相关文章推荐
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
jquery 元素相对定位代码
Oct 15 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
ExpressJS入门实例
Jan 14 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
基于vue 实现token验证的实例代码
Dec 14 Javascript
js实现每日签到功能
Nov 29 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
React实现全选功能
Aug 25 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 #Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 #Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 #Javascript
javascript判断非数字的简单例子
Jul 18 #Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 #Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 #Javascript
利用div+jquery自定义滚动条样式的2种方法
Jul 18 #Javascript
You might like
PHP中读取照片exif信息的方法
2014/08/20 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
php处理带有中文URL的方法
2016/07/11 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
简单通用的JS滑动门代码
2008/12/19 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
Python验证码截取识别代码实例
2020/05/16 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
新三好学生主要事迹
2014/01/23 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
2015年采购部工作总结
2015/04/23 职场文书
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫