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_01_isPlainObject分析与重构
Oct 20 Javascript
Jquery 一次处理多个ajax请求的代码
Sep 02 Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
Vue 中使用 typescript的方法详解
Feb 17 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
解决vue路由name同名,路由重复的问题
Aug 05 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编程中字符串处理的5个技巧小结
2007/11/13 PHP
cmd下运行php脚本
2008/11/25 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
python进阶_浅谈面向对象进阶
2017/08/17 Python
python判断输入日期为第几天的实例
2018/11/13 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
高考考python编程是真的吗
2020/07/20 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
领导干部培训感言
2014/01/23 职场文书
班主任工作经验材料
2014/02/02 职场文书
企业业务员岗位职责
2014/03/14 职场文书
入党政审材料范文
2014/12/24 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python
Android Rxjava3 使用场景详解
2022/04/07 Java/Android