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 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
Oct 16 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
JS设置cookie、读取cookie
Feb 24 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 Javascript
基于js判断浏览器是否支持webGL
Apr 18 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
pw的一个放后门的方法分析
2007/10/08 PHP
php设计模式 Proxy (代理模式)
2011/06/26 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
原生js实现下拉选项卡
2019/11/27 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
十个Python程序员易犯的错误
2015/12/15 Python
python实现数据写入excel表格
2018/03/25 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
测控技术与仪器个人求职信范文
2013/12/30 职场文书
日语专业求职信
2014/07/04 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python