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 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
轻轻松松学JS调试(不下载任何工具)
Apr 14 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
jQuery图片轮播的具体实现
Sep 11 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
jQuery实现的自动加载页面功能示例
Sep 04 Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
手写实现JS中的new
Nov 07 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 curl 并发最佳实践代码分享
2012/09/05 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
JavaScript插入动态样式实现代码
2012/02/22 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
python 将字符串转换成字典dict
2013/03/24 Python
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
Python的Django框架中settings文件的部署建议
2015/05/30 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
python中join()方法介绍
2018/10/11 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
Python 支持向量机分类器的实现
2020/01/15 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
opencv实现图像平移效果
2021/03/24 Python
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
学习之星事迹材料
2014/05/17 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
2015年乡镇发展党员工作总结
2015/03/31 职场文书
质量承诺书格式范文
2015/04/28 职场文书