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 相关文章推荐
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
JavaScript参数个数可变的函数举例说明
Oct 10 Javascript
用JavaScript实现对话框的教程
Jun 04 Javascript
JavaScript中的getTime()方法使用详解
Jun 10 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 Javascript
openLayer4实现动态改变标注图标
Aug 17 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
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
长波有什么东西
2021/03/01 无线电
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
jquery validate poshytip 自定义样式
2012/11/26 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
Vue自定义toast组件的实例代码
2018/08/15 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
轻松实现python搭建微信公众平台
2016/02/16 Python
基于python内置函数与匿名函数详解
2018/01/09 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
python文件读写代码实例
2019/10/21 Python
python创建n行m列数组示例
2019/12/02 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
python使用建议与技巧分享(一)
2020/08/17 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
美国零售商店:Blue&Cream
2017/04/07 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
北承题目(C++)
2012/05/16 面试题
课程设计心得体会
2013/12/28 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server