有时为了唯一标识网址或其它开发需要,我们需要将相对的网址转换为绝对的网址。当然前人实现方式已经不少,但或多或少的存在缺点或兼容问题。下面我将总结已有实现并给出相对完美的实现。

常规实现:地址转换

因该实现方式千变万化,故略去代码,但在开发时需考虑 base 标签的会带来的地址参照问题。

优点:无浏览器兼容问题。
缺点:代码量大,不简洁,速度慢。

借用浏览器:直接使用链接

var toAbsURL = function(url){
var a = document.createElement('a');
a.href = url;
return a.href;
};

优点:简洁,速度快。
缺点:部分浏览器(IE6, IE7)转换无效。

借用浏览器:封闭链接

var toAbsURL = function(url){
var div = document.createElement('div');
div.innerHTML = '<a href="' + url.replace(/"/g, '%22') + '"/>';
return div.firstChild.href;
};

优点:无浏览器兼容问题。
缺点:速度一般。

借用浏览器:图像方式

var toAbsURL = function(url){
var result,
img = document.createElement('img');
img.src = url;
result = img.src;
img.src = null;
return result;
};

优点:无浏览器兼容问题,速度快。
缺点:会发起 HTTP 请求。

借用浏览器:我的实现

var toAbsURL = function(){
var directlink = function(url){
var a = document.createElement('a');
a.href = url;
return a.href;
};
return directlink('') === '' ? function(url){
var div = document.createElement('div');
div.innerHTML = '<a href="' + url.replace(/"/g, '%22') + '"/>';
return div.firstChild.href;
} : directlink;
}();

优点:无浏览器兼容问题,使用了浏览器探测功能最大限度提升速度。

缺点:代码量稍大。

js 相对路径转为绝对路径的更多相关文章

  1. img的绝对路径转为相对路径

    $('#add_img').on('change', function(){ var objUrl = getObjectURL(this.files[0]) ; if (objUrl) { $(th ...

  2. 黄聪:PHP转换网址相对路径到绝对路径的一种方法

    相信很多程序(尤其是采集类的程序)都会有需要把网址的相对路径转换成绝对路径的需要,例如采集到某页面的HTML代码中包含资源文件经常会看到这样的文件名: <link rel="style ...

  3. JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串、blob对象在上传

    主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: ...

  4. javascript中外部js文件取得自身完整路径得办法

    原文:javascript中外部js文件取得自身完整路径得办法 有时候我们需要引入一个外部js文件,这个js文件又需要用到自己的路径或者是所在的目录,别问怎么又这么变态的需求,开发做久了各种奇葩需求也 ...

  5. 用node.js express设置路径后 子路径下的页面访问静态资源路径出问题

    在routes/news_mian.js 设置了访问news_main.html 的路径 '/',通知设置一个访问news-page.html的子路径'/newspage'子路径.但是在访问loacl ...

  6. js方法用来获取路径传参上所带的参数

    //js方法用来获取路径传参上所带的参数 function GetQueryString(param) { var reg = new RegExp("(^|&)" + p ...

  7. 使用监听器解决路径问题,例如在jsp页面引入js,css的web应用路径

    使用监听器解决路径问题,例如在jsp页面引入js,css的web应用路径 经常地,我们要在jsp等页面引入像js,css这样的文件,但是在服务器来访问的时候,这时间就有关到相对路径与绝对路径了.像网页 ...

  8. Vue.js Extension Pack 和 jsconfig.json 可以定位跳转到@开头的路径等自定义路径

    Vue.js Extension Pack | vsCode插件 可以定位跳转到@开头的路径等自定义路径 webpack自定义别名后,VScode路径提示问题 //tsconfig.json 或者 j ...

  9. 04-Node.js学习笔记-相对路径VS绝对路径

    4.1相对路径VS绝对路径 大多数情况下使用绝对路径,因为相对路径有时候相对的是命令行工具的当前工作目录 在读取文件或者设置文件路径时都会选择绝对路径 4.2使用__dirname 获取当前文件所在的 ...

随机推荐

  1. MySQL的group_concat()函数合并多行数据

    一个很有用的函数 group_concat(),手册上说明:该函数返回带有来自一个组的连接的非NULL值的字符串结果. 通俗点理解,其实是这样的:group_concat()会计算哪些行属于同一组,将 ...

  2. bzoj1016/luogu4208 最小生成树计数 (kruskal+暴搜)

    由于有相同权值的边不超过10条的限制,所以可以暴搜 先做一遍kruskal,记录下来每个权值的边使用的数量(可以离散化一下) 可以证明,对于每个权值,所有的最小生成树中选择的数量是一样的.而且它们连成 ...

  3. POJ 1062 昂贵的聘礼(图论,最短路径)

    POJ 1062 昂贵的聘礼(图论,最短路径) Description 年轻的探险家来到了一个印第安部落里.在那里他和酋长的女儿相爱了,于是便向酋长去求亲.酋长要他用10000个金币作为聘礼才答应把女 ...

  4. 【洛谷P1272】道路重建

    题目大意:给定一个 N 个节点的树,求至少剪掉多少条边才能使得从树中分离出一个大小为 M 的子树. 题解:考虑树形 dp,定义 \(dp[u][i][t]\) 为以 u 为根节点与前 i 个子节点构成 ...

  5. 24. Swap Nodes in Pairs(M);25. Reverse Nodes in k-Group(H)

    24. Swap Nodes in Pairs Given a linked list, swap every two adjacent nodes and return its head. For ...

  6. python---redis管道(事务)和发布订阅

    管道:将数据操作放在内存中,只有成功后,才会一次性全部放入redis #管道(事务),要是都成功则成功,失败一个全部失败 #原理:将数据操作放在内存中,只有成功后,才会一次性全部放入redis pip ...

  7. python 手写队列

    #encoding=utf8 class MQueue: def __init__(self): self.data = [] def get(self): if self.data.__len__( ...

  8. python 基础知识 列表的 增删改查 以及迭代取值

    """ python 列表 通用方法 元组.数组.字典 取值方法 [] 列表中可以存储不同类型的数据 函数 封装了独立的功能可以直接调用 函数名(参数) 方法 和函数类似 ...

  9. [转载]HTML5浏览器测试网站汇总

    http://www.cnblogs.com/javawebsoa/archive/2012/04/19/2458224.html 浏览器支持情况统计 When Can IUse:图表经常更新,展示了 ...

  10. HDU 1176 免费馅饼 DP类似数塔题

    解题报告: 小明走在一条小路上,这条小路的长度是10米,从左到右依次是0到10一共十个点,现在天上会掉馅饼,给出馅饼掉落的坐标和时间,一开始小明的位置是在坐标为5的位置, 他每秒钟只能移动一米的距离, ...