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的密码强度验证代码
Mar 01 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
jquery ajax请求实例深入解析
Nov 26 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
一分钟理解js闭包
May 04 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
在vue中使用console.log无效的解决
Aug 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
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
use jscript with List Proxy Server Information
2007/06/11 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
学习python 之编写简单乘法运算题
2016/02/27 Python
对pandas中apply函数的用法详解
2018/04/10 Python
python3爬虫怎样构建请求header
2018/12/23 Python
Python批量删除只保留最近几天table的代码实例
2019/04/01 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
python求前n个阶乘的和实例
2020/04/02 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
3.12植树节活动总结2014
2014/03/13 职场文书
C++程序员求职信
2014/05/07 职场文书
见习报告的格式
2014/10/31 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
初中体育教学随笔
2015/08/15 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书