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 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
Javascript实现基本运算器
Jul 15 Javascript
简单实现js拖拽效果
Jul 25 Javascript
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
浅析从vue源码看观察者模式
Jan 29 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 Javascript
vue点击按钮动态创建与删除组件功能
Dec 29 Javascript
JS实现分页导航效果
Feb 19 Javascript
通过JS判断网页是否为手机打开
Oct 28 Javascript
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
PHP7新功能总结
2019/04/14 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
Javascript 跨域访问解决方案
2009/02/14 Javascript
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
Python下调用Linux的Shell命令的方法
2018/06/12 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
python 实现单例模式的5种方法
2020/09/23 Python
美国折扣网站:jClub
2017/08/07 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
一些网络技术方面的面试题
2014/05/01 面试题
面试后感谢信
2014/02/01 职场文书
策划创业计划书
2014/02/06 职场文书
外贸专业求职信
2014/03/09 职场文书
毕业自我鉴定书
2014/03/24 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
运动会广播稿50字
2015/08/19 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
承诺书应该怎么写?
2019/09/10 职场文书
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python