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中局部变量和全局变量的区别详解
Feb 27 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
JS中type="button"和type="submit"的区别
Jul 04 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
微信小程序实现图片放大预览功能
Oct 22 Javascript
Webpack框架核心概念(知识点整理)
Dec 22 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
layUI实现列表查询功能
Jul 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
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
JavaScript 指导方针
2007/04/05 Javascript
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
python 异或加密字符串的实例
2018/10/14 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
浅析Python 多行匹配模式
2020/07/24 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
开办大学饮食联盟创业计划书
2014/01/29 职场文书
财产公证书样本
2014/04/04 职场文书
超市主管竞聘书
2015/09/15 职场文书
高二语文教学反思
2016/02/16 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
Golang 正则匹配效率详解
2021/04/25 Golang