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 相关文章推荐
DWZ table的原生分页浅谈
Mar 01 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 Javascript
JavaScript 中的 this 工作原理
Jun 20 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
vue实现条件叠加搜索的解决方法
May 28 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 Javascript
Vue单文件组件开发实现过程详解
Jul 30 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
初探PHP5
2006/10/09 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
JavaScript继承方式实例
2010/10/29 Javascript
最佳JS代码编写的14条技巧
2011/01/09 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
增大python字体的方法步骤
2020/07/05 Python
python 字符串格式化的示例
2020/09/21 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
纪检干部先进事迹材料
2014/08/23 职场文书
碧霞祠导游词
2015/02/09 职场文书
警示教育片观后感
2015/06/17 职场文书
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL