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刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 Javascript
JS分页效果示例
Oct 11 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
Vue数据驱动模拟实现3
Jan 11 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 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
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
ThinkPHP中I(),U(),$this->post()等函数用法
2014/11/22 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
AngularJS实现tab选项卡的方法详解
2017/07/05 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
在漏洞利用Python代码真的很爽
2007/08/26 Python
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
python+pyqt5编写md5生成器
2019/03/18 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
银行求职信个人范文
2013/12/16 职场文书
文明餐桌活动方案
2014/02/11 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
基层党支部承诺书
2015/04/30 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
八年级英语教学反思
2016/02/15 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python