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获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
javascript验证身份证完全方法具体实现
Nov 18 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
js中this用法实例详解
May 05 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 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脚本[带参数]的方法
2010/01/22 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
[20:30]职业巡回赛回顾
2018/08/09 DOTA
深入理解Python中range和xrange的区别
2017/11/26 Python
详解Python中的四种队列
2018/05/21 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
煤矿班组长的职责
2013/12/25 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
岳庙导游词
2015/02/04 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
python tqdm用法及实例详解
2021/06/16 Python
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL