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 相关文章推荐
jQuery 连续列表实现代码
Dec 21 Javascript
javascript中String类的subString()方法和slice()方法
May 24 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
xml转json的js代码
Aug 28 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 Javascript
angularjs中ng-attr的用法详解
Dec 31 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
Weex开发之地图篇的具体使用
Oct 16 Javascript
浅析vue-router中params和query的区别
Dec 24 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 Javascript
深入理解Vue的数据响应式
May 15 Vue.js
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
一个用php3编写的简单计数器
2006/10/09 PHP
windows xp下安装pear
2006/12/02 PHP
PHP EOT定界符的使用详解
2008/09/30 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
用js的for循环获取radio选中的值
2013/10/21 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
Javascript表单验证要注意的事项
2014/09/29 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
python3实现点餐系统
2019/01/24 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
Python单元和文档测试实例详解
2019/04/11 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
旧时光糖果:Old Time Candy
2018/02/05 全球购物
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
开学季活动策划方案
2014/02/28 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
python分分钟绘制精美地图海报
2022/02/15 Python
Python+Tkinter制作专属图形化界面
2022/04/01 Python
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
python获取带有返回值的多线程
2022/05/02 Python