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 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
Javascript实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
js列举css中所有图标的实现代码
Jul 04 Javascript
JavaScript 产生不重复的随机数三种实现思路
Dec 13 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
js css自定义分页效果
Feb 24 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
字节飞书面试promise.all实现示例
Jun 16 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
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
动态加载iframe
2006/06/16 Javascript
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
python实现简易淘宝购物
2019/11/22 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
大专毕业生求职信
2014/07/05 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
python中if和elif的区别介绍
2021/11/07 Python