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高级程序设计 扩展--关于动态原型
Nov 09 Javascript
基于javascript编写简单日历
May 02 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
js实现鼠标切换图片(无定时器)
Jan 27 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
珊瑚虫IP库浅析
2007/02/15 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
php 魔术方法详解
2014/11/11 PHP
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
js输出列表实现代码
2010/09/12 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
Python 数据结构之队列的实现
2017/01/22 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
Python实现注册登录系统
2017/08/08 Python
python实现输入数字的连续加减方法
2018/06/22 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
html Table 表头固定的实现
2019/01/22 HTML / CSS
介绍一下linux的文件权限
2012/02/15 面试题
医师定期考核实施方案
2014/05/07 职场文书
中职生求职信
2014/07/01 职场文书
测绘工程专业求职信
2014/07/15 职场文书
烈士陵园观后感
2015/06/08 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android