js 相对路径转为绝对路径
有时为了唯一标识网址或其它开发需要,我们需要将相对的网址转换为绝对的网址。当然前人实现方式已经不少,但或多或少的存在缺点或兼容问题。下面我将总结已有实现并给出相对完美的实现。
常规实现:地址转换
因该实现方式千变万化,故略去代码,但在开发时需考虑 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 相对路径转为绝对路径的更多相关文章
- img的绝对路径转为相对路径
$('#add_img').on('change', function(){ var objUrl = getObjectURL(this.files[0]) ; if (objUrl) { $(th ...
- 黄聪:PHP转换网址相对路径到绝对路径的一种方法
相信很多程序(尤其是采集类的程序)都会有需要把网址的相对路径转换成绝对路径的需要,例如采集到某页面的HTML代码中包含资源文件经常会看到这样的文件名: <link rel="style ...
- JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串、blob对象在上传
主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: ...
- javascript中外部js文件取得自身完整路径得办法
原文:javascript中外部js文件取得自身完整路径得办法 有时候我们需要引入一个外部js文件,这个js文件又需要用到自己的路径或者是所在的目录,别问怎么又这么变态的需求,开发做久了各种奇葩需求也 ...
- 用node.js express设置路径后 子路径下的页面访问静态资源路径出问题
在routes/news_mian.js 设置了访问news_main.html 的路径 '/',通知设置一个访问news-page.html的子路径'/newspage'子路径.但是在访问loacl ...
- js方法用来获取路径传参上所带的参数
//js方法用来获取路径传参上所带的参数 function GetQueryString(param) { var reg = new RegExp("(^|&)" + p ...
- 使用监听器解决路径问题,例如在jsp页面引入js,css的web应用路径
使用监听器解决路径问题,例如在jsp页面引入js,css的web应用路径 经常地,我们要在jsp等页面引入像js,css这样的文件,但是在服务器来访问的时候,这时间就有关到相对路径与绝对路径了.像网页 ...
- Vue.js Extension Pack 和 jsconfig.json 可以定位跳转到@开头的路径等自定义路径
Vue.js Extension Pack | vsCode插件 可以定位跳转到@开头的路径等自定义路径 webpack自定义别名后,VScode路径提示问题 //tsconfig.json 或者 j ...
- 04-Node.js学习笔记-相对路径VS绝对路径
4.1相对路径VS绝对路径 大多数情况下使用绝对路径,因为相对路径有时候相对的是命令行工具的当前工作目录 在读取文件或者设置文件路径时都会选择绝对路径 4.2使用__dirname 获取当前文件所在的 ...
随机推荐
- Oracle中对number类型数据to_char()出现各位少0,或者值为###的处理
问题描述: 在Oracle中使用to_char()函数时当number值为小数时,常常个位0不显示 比如:select to_char(0.02) from dual,结果为.02 改进为 selec ...
- 【转】安全加密(一):这些MCU加密方法你都知道吗?
本文导读 随着物联网和边缘计算的出现,五花八门的MCU也被应用其中,如何保证我们的程序安全和知识产权不受侵犯呢,本文我们将对主流MCU的程序加密进行讲解,希望能够帮助你选择最适合自己应用的微处理器. ...
- 【bzoj3569】 DZY Loves Chinese II
http://www.lydsy.com/JudgeOnline/problem.php?id=3569 (题目链接) 题意 给出一个无向图,$Q$组询问,每次询问将原图断掉$C$条边后是否还连通.在 ...
- Mysql(二)函数与连接
一.函数 1.if函数 if(exp1, exp2, exp3) 判断exp1是否为true(不为0,并且不为nlll),如果为true,返回 exp2的值,否则返回exp3的值. selec ...
- Eclipse 报 "The builder launch configuration could not be found" 错误
Eclipse 报 "The builder launch configuration could not be found" 错误的解决办法 标签: eclipseEclipse ...
- LeetCode 6罗马数字转整数
罗马数字包含以下七种字符:I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做 II ,即为两个并列 ...
- gulpfile.js不断更新中...
Gulp压缩合并js/css文件,压缩图片,以及热更新教程 var gulp = require('gulp');var concat = require('gulp-concat');//- 多个文 ...
- 一个简单的Kubernetes应用部署示例
说明 我们通过一个示例来演示一下kubernetes部署应用的基本配置. 这个示例相对比较简单,就是一个tomcat应用加上一个mysql数据库 在tomcat里运行一个简单的webappp,这个ap ...
- logstash marking url as dead 问题解决
具体问题如下图所示: 将 INFO 信息打印大致如下所示: [2018-03-05T16:26:08,711][INFO ][logstash.setting.writabledirectory] C ...
- webpack打包提取css到独立文件
将本来镶嵌在bundle.js的css转到外面来,我们需要用到一个插件:extract-text-webpack-plugin 使用方法: 1.安装 npm i extract-text-webpac ...