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复选框CHECKBOX全选,取消全选
Aug 30 Javascript
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
js 金额格式化来回转换示例
Feb 23 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
使用webpack和rollup打包组件库的方法
Feb 25 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
用 PHP5 轻松解析 XML
2006/12/04 PHP
加速XP搜索功能堪比vista
2007/03/22 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
php简单统计中文个数的方法
2016/09/30 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
js 中的switch表达式使用示例
2020/06/03 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
javascript中this的四种用法
2015/05/11 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
python logging模块的使用
2020/09/07 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
车辆转让协议书
2014/04/15 职场文书
五四青年节演讲稿
2014/05/26 职场文书
代理人委托书
2014/09/16 职场文书
2014年团支部工作总结
2014/11/17 职场文书
考察邀请函范文
2015/01/31 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书