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 相关文章推荐
JS模块与命名空间的介绍
Mar 22 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
简述JavaScript中正则表达式的使用方法
Jun 15 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
Javascript实现前端简单的路由实例
Sep 11 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 Javascript
Vue的双向数据绑定实现原理解析
Feb 17 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
php google或baidu分页代码
2009/11/26 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
为数据添加append,remove功能
2006/10/03 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
IE 下的只读 innerHTML
2009/08/21 Javascript
JavaScript 密码强度判断代码
2009/09/05 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
Python argparse模块使用方法解析
2020/02/20 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
python 读取二进制 显示图片案例
2020/04/24 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
新闻学专业应届生求职信
2013/11/08 职场文书
旅游个人求职信范文
2014/01/30 职场文书
农民工讨薪标语
2014/06/26 职场文书
物理课外活动总结
2014/08/27 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
初中同学会致辞
2015/08/01 职场文书