javascript将相对路径转绝对路径示例


Posted in Javascript onMarch 14, 2014

这里介绍的其实本质上是两种方法,通过创建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"));
Javascript 相关文章推荐
用window.location.href实现刷新另个框架页面
Mar 07 Javascript
jQuery cdn使用介绍
May 08 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
javascript break指定标签打破多层循环示例
Jan 20 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
canvas绘制多边形
Feb 24 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
Node.js和PHP根据ip获取地理位置的方法
Mar 14 #Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 #Javascript
javascript回车完美实现tab切换功能
Mar 13 #Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 #Javascript
JQuery中extend使用介绍
Mar 13 #Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 #Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 #Javascript
You might like
使用无限生命期Session的方法
2006/10/09 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
php eval函数一句话木马代码
2015/05/21 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
javascript if条件判断方法小结
2014/05/17 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
用python读写excel的方法
2014/11/18 Python
python+django+rest框架配置创建方法
2019/08/31 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
如何基于python实现归一化处理
2020/01/20 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
英国在线花园中心:You Garden
2018/06/03 全球购物
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
毕业实习评语
2014/02/10 职场文书
大学军训感言200字
2014/02/26 职场文书
青年文明号汇报材料
2014/12/23 职场文书
玄武湖导游词
2015/02/05 职场文书
2015年团支书工作总结
2015/04/03 职场文书
Python作用域和名称空间的详细介绍
2022/04/13 Python