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 相关文章推荐
JavaScript学习历程和心得小结
Aug 16 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
Jul 30 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
layer更改皮肤的实现方法
Sep 11 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函数
2010/01/11 PHP
PHP容易忘记的知识点分享
2013/04/30 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
jquery简单体验
2007/01/10 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
python生成验证码图片代码分享
2016/01/28 Python
详解Python编程中基本的数学计算使用
2016/02/04 Python
Python错误处理操作示例
2018/07/18 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
详解python中的线程与线程池
2019/05/10 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
python批量解压zip文件的方法
2019/08/20 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
《九色鹿》教学反思
2014/02/27 职场文书
银行贷款承诺书
2014/03/29 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
招标授权委托书样本
2014/09/23 职场文书
保险内勤岗位职责
2015/04/13 职场文书
安全生产警示教育活动总结
2015/05/09 职场文书
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python