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 相关文章推荐
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
JsRender实用入门教程
Oct 31 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
Bootstrap表单Form全面解析
Jun 13 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
Vuex新手的理解与使用详解
May 31 Javascript
Electron vue的使用教程图文详解
Jul 05 Javascript
js中Function引用类型常见有用的方法和属性详解
Dec 11 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 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
PHP安全技术之 实现php基本安全
2010/09/04 PHP
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
Python常用库大全及简要说明
2020/01/17 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
用python读取xlsx文件
2020/12/17 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
不打扫卫生检讨书
2014/02/12 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
超市采购员岗位职责
2015/04/07 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
小学英语教学随笔
2015/08/14 职场文书