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学习5 jQuery事件模型
Feb 07 Javascript
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
jquery中this的使用说明
Sep 06 Javascript
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
关于微信小程序bug记录与解决方法
Aug 15 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 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原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
JavaScript静态的动态
2006/09/18 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
javascript简单写的判断电话号码实例
2017/05/24 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
Vuejs+vue-router打包+Nginx配置的实例
2018/09/20 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
Django组件cookie与session的具体使用
2019/06/05 Python
python之array赋值技巧分享
2019/11/28 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
在职人员函授期间自我评价分享
2013/11/08 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
客房领班岗位职责
2015/02/11 职场文书
人与自然的观后感
2015/06/18 职场文书