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 相关文章推荐
些很实用且必用的小脚本代码
Jun 26 Javascript
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 Javascript
js select option对象小结
Dec 20 Javascript
Visual Studio中js调试的方法图解
Jun 30 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
AngularJS中watch监听用法分析
Nov 04 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 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中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
如何使用php实现评委评分器
2015/07/31 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
让您的菜单不离网站
2006/10/03 Javascript
JS之小练习代码
2008/10/12 Javascript
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
nodejs中安装ghost出错的原因及解决方法
2017/10/23 NodeJs
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
python实现读取命令行参数的方法
2015/05/22 Python
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
大学毕业感言100字
2014/02/03 职场文书
保护地球的标语
2014/06/17 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书