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 setTimeout和setInterval 的区别
Dec 08 Javascript
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
基于Jquery与WebMethod投票功能实现代码
Jan 19 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 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
咖啡语言
2021/03/03 咖啡文化
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
js 方法实现返回多个数据的代码
2009/04/30 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
js倒计时小程序
2013/11/05 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
python控制台英汉汉英电子词典
2020/04/23 Python
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
pandas 小数位数 精度的处理方法
2018/06/09 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
Python 占位符的使用方法详解
2019/07/10 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
Django模板语言 Tags使用详解
2019/09/09 Python
python实现简易学生信息管理系统
2020/04/05 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
公益活动策划方案
2014/01/09 职场文书
男方父母证婚词
2014/01/12 职场文书
医校毕业生自我鉴定
2014/01/25 职场文书
自行车广告词大全
2014/03/21 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
教师理论学习心得体会
2016/01/21 职场文书