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 相关文章推荐
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 Javascript
react-native 封装选择弹出框示例(试用ios&android)
Jul 11 Javascript
关于Vue组件库开发详析
Jul 01 Javascript
微信小程序使用wxParse解析html的方法示例
Jan 17 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
Sep 27 Javascript
纯js实现无缝滚动功能代码实例
Feb 21 Javascript
原生JS实现留言板
Mar 26 Javascript
Javascript实现简易天数计算器
May 18 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
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
jQuery select控制插件
2009/08/17 Javascript
学习ExtJS accordion布局
2009/10/08 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
js实现时间日期校验
2020/05/26 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
python实现kmp算法的实例代码
2019/04/03 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
党校自我鉴定范文
2013/10/02 职场文书
优秀应届毕业生推荐信
2014/02/18 职场文书
《社戏》教学反思
2014/04/15 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书