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 解析读取XML文档 实例代码
Jul 07 Javascript
js png图片(有含有透明)在IE6中为什么不透明了
Feb 07 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
JS中字符串trim()使用示例
May 26 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 Javascript
Vue实现手机计算器
Aug 17 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
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 xml 入门学习资料
2011/01/01 PHP
PHP学习 变量使用总结
2011/03/24 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
javascript的函数作用域
2014/11/12 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
[02:03]风行者至宝清风环佩外观展示
2020/09/05 DOTA
python正则表达式re之compile函数解析
2017/10/25 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
python+flask实现API的方法
2018/11/21 Python
python opencv摄像头的简单应用
2019/06/06 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
职称评定自我鉴定
2014/03/18 职场文书
团日活动总结报告
2014/06/25 职场文书
创先争优活动承诺书
2014/08/30 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
MySQL数据库 安全管理
2022/05/06 MySQL