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 相关文章推荐
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
浅谈express 中间件机制及实现原理
Aug 31 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 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
改变Apache端口等配置修改方法
2008/06/05 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
js压缩利器
2007/02/20 Javascript
JS加ASP二级域名转向的代码
2007/05/17 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
Python中zfill()方法的使用教程
2015/05/20 Python
Python循环语句之break与continue的用法
2015/10/14 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
香港通票:Hong Kong Pass
2019/02/26 全球购物
1亿有多大教学反思
2014/05/01 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
办公用品质量保证书
2015/05/11 职场文书
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android