JavaScript将相对地址转换为绝对地址示例代码
更新时间：2013年07月19日 17:35:14 作者：
本文为大家详细介绍下JavaScript怎么将相对地址转换为绝对地址，具体的示例如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
在看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")); //返回原始路径
相关文章
这篇文章主要为大家详细介绍了js图片上传的封装代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
js-utils封装了常用的工具函数,开箱即用,下面这篇文章主要给大家介绍了关于能够事半功倍的JS utils工具函数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
Babel是一个广泛使用的转码器,babel可以将ES6代码完美地转换为ES5代码，所以下面这篇文章就来给大家详细介绍了关于利用babel将es6语法转es5的相关资料，文章通过示例介绍的非常详细，需要的朋友可以参考下。2017-12-12
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
今天小编就为大家分享一篇浅谈layui数据表格判断问题(加入表单元素),设置单元格样式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
JavaScript Array.from及其相关用法详解(示例演示)
Array.from方法是ES6引入的一个静态方法,用于从类数组对象或可迭代对象创建一个新的数组实例,本文将详细介绍Array.from的基本用法、实际场景中的应用,以及它如何与其他JavaScript特性相结合提升代码的简洁性和可读性,感兴趣的朋友一起看看吧2025-03-03
本文给大家分享了javascript基础知识，包括数组的方法，函数的方法，数字的方法，对象的方法，字符串的方法，常规方法，正则表达式方法，本文介绍的非常详细，具有参考价值特此分享供大家参考2016-01-01
这篇文章主要为大家详细介绍了移动端触摸滑动插件swiper的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了JavaScript的回调函数，帮助大家正确理解和使用 JavaScript中的回调函数，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了JavaScript 预解释,包含带var关键字预解释、带function关键字预解释,需要的朋友可以参考下2015-01-01
这篇文章主要为大家详细介绍了openLayer4实现动态改变标注图标，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
最新评论