这里介绍的其实本质上是两种方法,通过创建DOM或通过JavaScript计算:

1)通过新创建的Image, 经测试会发送一个Aborted的请求,并且IE6不支持, 将new Image改成document.createElement('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也不支持

/*jslint regexp: true, white: true, maxerr: 50, indent: 2 */

function parseURI(url) {

var m = String(url).replace(/^\s+|\s+$/g, '').match(/^([^:\/?#]+:)?(\/\/(?:[^:@]*(?::[^:@]*)?@)?(([^:\/?#]*)(?::(\d*))?))?([^?#]*)(\?[^#]*)?(#[\s\S]*)?/);

// authority = '//' + user + ':' + pass '@' + hostname + ':' port

return (m ? {

href : m[0] || '',

protocol : m[1] || '',

authority: m[2] || '',

host : m[3] || '',

hostname : m[4] || '',

port : m[5] || '',

pathname : m[6] || '',

search : m[7] || '',

hash : m[8] || ''

} : null);

}

function absolutizeURI(base, href) {// RFC 3986

function removeDotSegments(input) {

var output = [];

input.replace(/^(\.\.?(\/|$))+/, '')

.replace(/\/(\.(\/|$))+/g, '/')

.replace(/\/\.\.$/, '/../')

.replace(/\/?[^\/]*/g, function (p) {

if (p === '/..') {

output.pop();

} else {

output.push(p);

}

});

return output.join('').replace(/^\//, input.charAt(0) === '/' ? '/' : '');

}

href = parseURI(href || '');

base = parseURI(base || '');

return !href || !base ? null : (href.protocol || base.protocol) +

(href.protocol || href.authority ? href.authority : base.authority) +

removeDotSegments(href.protocol || href.authority || href.pathname.charAt(0) === '/' ? href.pathname : (href.pathname ? ((base.authority && !base.pathname ? '/' : '') + base.pathname.slice(0, base.pathname.lastIndexOf('/') + 1) + href.pathname) : base.pathname)) +

(href.protocol || href.authority || href.pathname ? href.search : (href.search || base.search)) +

href.hash;

}

因我们的产品为手机端网页,早已不支持IE6,最终使用的是第二种方案;

由此可见,用原生态的方法访问所有的Image, Anchor时,返回的都是绝对路径,此时如果想返回原来的相对路径,可以用查询DOM的方法,如jQuery.attr()方法:

//返回绝对路径,jQuery对象实质上是"类数组"结构(类似arguments),因此使用[0]可以访问到原生态的对象,然后取"href";

console.log($anchor[0]["href"]);

//返回原始路径

console.log($anchor.attr("href"));

本文原创发布php中文网,转载请注明出处,感谢您的尊重!

php js绝对路径,javascript将相对路径转绝对路径示例_基础知识相关推荐

  1. spidermonkey php,javascript SpiderMonkey中的函数序列化如何进行_基础知识

    在Javascript中,函数可以很容易的被序列化(字符串化),也就是得到函数的源码.但其实这个操作的内部实现(引擎实现)并不是你想象的那么简单.SpiderMonkey中一共使用过两种函数序列化的技 ...

  2. php使用 js格式解析,JavaScript解析JSON格式数据的方法示例

    本文实例讲述了JavaScript解析JSON格式数据的方法.分享给大家供大家参考,具体如下: 1.使用JavaScript提供的eval()函数function JsonText1() { var ...

  3. js+打开php文档,javascript打开word文档的方法_基础知识

    首先我们新建一个html文件,并且写一个FileUpLoad以及button控件. 代码如下: fileUpload 然后,在写一个javascript OpenFile方法. 代码如下: funct ...

  4. html事件机制,浅析JavaScript中的事件机制_基础知识

    事件是什么 ? JavaScript与HTML交互是通过在用户或浏览器操纵页面上发生的事件进行处理. 当页面加载,这是一个事件.当用户点击一个按钮,这一下,也就是一个事件.事件的另一个例子是类似按下任 ...

  5. php js 图片旋转,使图片旋转的3种解决方案_基础知识

    图片旋转效果的研究 最近在项目中需要做图片的旋转功能,我研究了一下.下面来总结下图片旋转在各个浏览器的支持情况 一.图片旋转的方案 1)css3实现图片旋转功能:支持的浏览器有chrome,firef ...

  6. php文本框限制字节,js限制文本框输入长度两种限制方式(长度、字节数)_基础知识...

    功能/特点: 1.实时显示可输入的字数(字节数) 2.两种限制方式(长度.字节数) 3.中文输入法下可正常使用,无BUG 4.同一页面可以使用多个,相互不干扰 limit.js function li ...

  7. php取名字算法,JavaScript排序算法之希尔排序的2个实例_基础知识

    插入排序在对几乎已经排好序的数据操作时, 效率高, 即可以达到线性排序的效率. 但插入排序一般来说是低效的, 因为插入排序每次只能将数据移动一位. 希尔排序按其设计者希尔(Donald Shell)的 ...

  8. PathFinding.js – 综合性的 JavaScript 路径查找库

    PathFinding.js 是一个综合性的 JavaScript 路径查找库.这个项目的目的是提供一个可以很容易地纳入网页游戏的路径查找库.它可以运行在 Node.js 或浏览器中.提供的在线演示展 ...

  9. 【D3.V3.js系列教程】--(十四)有路径的文字

    [D3.V3.js系列教程]--(十四)有路径的文字 1. 在 svg 中插入一個 text // 在 body 中插入一個 svg var svg = d3.select('body').appen ...

最新文章

  1. 比特币现金网络会看到什么样的代币?
  2. 数据库sql linux,linux安装mysql数据库
  3. vue input file onchange_vue常用指令汇总
  4. sql server 调用webservice
  5. CSS border-image属性
  6. 刚回到北京,倒时差中……
  7. 我们这旮都是黑社会[转]
  8. 快钱接口php,快钱支付接口
  9. 一位准程序员对软件行业的8个问题
  10. UTF-8 编码里,一个汉字占用多少个字节 -转
  11. P2326 AKN’s PPAP
  12. 计算机组成与体系结构重点(四川大学软件学院)
  13. 得力D991CN Plus计算器评测(全程对比卡西欧fx-991CN X)
  14. 吃热狗游戏Java_(转)Java中正确理解Thread Local的原理与适用场景
  15. Python 词云图:wordcloud库的使用
  16. php计算1000000以内的质数,1000000以内质数表
  17. Javascript验证身份证号码:正则表达式
  18. 详细解析Linux /etc/shadow文件
  19. XP sp3 安装Step7 V5.5和WinCC V7.0记录(仅用于个人)
  20. 爱签电子合同怎么签,应该注意哪些问题?

热门文章

  1. 在c语言中large的作用,输入两个数组,调用large函数比较,计数,输出统计结果...
  2. html给图片设置编剧,漫画简明编剧教程【4】如何设计角色
  3. oracle递归查询路径,oracle递归查询记录
  4. PL/SQL中的RSA加密
  5. BackgroundWorker的包装器
  6. 使用Jenkins在Azure Web App上进行ASP.NET Core应用程序的持续集成和部署(CI/CD)–第4天
  7. 微软发布首版基于 Chromium 79 的 Edge 浏览器
  8. 开源界也要注意,Apache 基金会与 GitHub 都受美国法律约束
  9. three.js glb 多个_直降7.1万元 奔驰GLB开始“大甩卖”
  10. python中backward_pytorch的梯度计算以及backward方法详解