JS获取当前脚本文件的绝对路径


Posted in Javascript onMarch 02, 2016

 当写模块加载器时,获取当前脚本文件的绝对路径作为基础路径是必不可少的一步,下面我们一起来探讨一下这个问题吧!

一、各大浏览器的实现方式 

 

 [a]. Chrome和FF

 超简单的一句足矣!

var getCurrAbsPath = function(){
 return document.currentScript.src;
};

这里利用了对象 document.currentScript ,它返回的是当前执行的script元素;然后调用script元素的src属性即可获取脚本文件的绝对路径。

  [b]. IE10+、Safari和Opera9

 利用Error对象的stack属性(IE10+)、sourceURL属性(Safari)和stacktrace属性(Opera9)萃取绝对路径

var getCurrAbsPath = function(){
  var a = {}, stack;
  try{
   a.b();
  }
  catch(e){
   stack = e.stack || e.sourceURL || e.stacktrace; 
  }
  var rExtractUri = /(?:http|https|file):\/\/.*?\/.+?.js/, 
    absPath = rExtractUri.exec(stack);
  return absPath[0] || '';
};

  [C]. IE5.5~9

 遍历文档中的script标签

var getCurrAbsPath = function(){
  var scripts = document.scripts;
  var isLt8 = ('' + document.querySelector).indexOf('[native code]') === -1;
  for (var i = scripts.length - 1, script; script = scripts[i--];){
    if (script.readyState === 'interative'){
     return isLt8 ? script.getAttribute('src', 4) : script.src;  
    }
  }
};

二、相关知识介绍

IE5.5~9下script的readyState表示该script元素的状态,分别有以下的状态值:

uninitialized:未初始化

loading:正在加载

loaded:加载完成

interative:执行中

complete:执行完

可通过订阅onreadystatechange事件来监听script元素状态的变化。但不幸的是loaded和complete状态并出现顺序不定且有可能仅出现其中一个,因此建议在动态添加script元素时,先设置src属性后再将script元素添加到DOM树中,这样loaded和complete状态仅会出现其中一个(虽然每次请求时,哪个出现是不定的),比较好监测。

 三、IE和FF下的另一种方式

 

 

 通过订阅 window.onerror 事件,事件处理函数将接受三个参数,分别是msg,url和num。这里url就是当前脚本的绝对路径了。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
仿迅雷焦点广告效果(JQuery版)
Nov 19 Javascript
javascript 获取图片颜色
Apr 05 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
动态加载脚本提升javascript性能
Feb 24 Javascript
JavaScript各类型的关系图解
Oct 16 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
JavaScript实现联动菜单特效
Jan 07 Javascript
解决vue 退出动画无效的问题
Aug 09 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 #Javascript
浅谈JS原型对象和原型链
Mar 02 #Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 #Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 #Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 #Javascript
javascript求日期差的方法
Mar 02 #Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 #Javascript
You might like
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
php实现mysql封装类示例
2014/05/07 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
JS修改css样式style浅谈
2013/05/06 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
浅谈js的异步执行
2016/10/18 Javascript
web打印小结
2017/01/11 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
Python的Django框架中if标签的相关使用
2015/07/15 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
python实现教务管理系统
2018/03/12 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
什么是View State?
2013/01/27 面试题
配件采购员岗位职责
2013/12/03 职场文书
老师给学生的表扬信
2014/01/17 职场文书
消防先进事迹材料
2014/02/10 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
离婚答辩状范文
2015/05/22 职场文书
交通事故被告答辩状
2015/05/22 职场文书
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS