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 相关文章推荐
Javascript Math对象
Aug 13 Javascript
JavaScript中的Array对象使用说明
Jan 17 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
Oct 16 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
Node.js中DNS模块学习总结
Feb 28 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
鼠标焦点离开文本框时验证的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
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
Python数据操作方法封装类实例
2017/06/23 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
英国袜子店:Sock Shop
2017/01/11 全球购物
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
医学生求职自荐信
2013/10/25 职场文书
公司人力资源的自我评价
2014/01/02 职场文书
教师一岗双责责任书
2014/04/16 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
创先争优活动承诺书
2014/08/30 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书