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 相关文章推荐
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
深入理解Ajax的get和post请求
Jun 02 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
react-native之ART绘图方法详解
Aug 08 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 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
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
jquery模拟按下回车实现代码
2011/09/20 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
vue自定义全局共用函数详解
2018/09/18 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
如何清空Session
2015/02/23 面试题
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
财务会计专业毕业生自荐信
2013/10/19 职场文书
仓库门卫岗位职责
2013/12/22 职场文书
社区交通安全实施方案
2014/03/22 职场文书
我的祖国演讲稿
2014/05/04 职场文书
安全环保演讲稿
2014/08/28 职场文书
英语读书笔记
2015/07/02 职场文书
JS实现扫雷项目总结
2021/05/19 Javascript