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动态给table添加、删除行 改进版
Jan 19 Javascript
分享一个asp.net pager分页控件
Jan 04 Javascript
jQuery登陆判断简单实现代码
Apr 21 Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 Javascript
js原生map实现的方法总结
Jan 19 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 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学习笔记之字符串编码的转换和判断
2014/05/22 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
Laravel框架自定义分页样式操作示例
2020/01/26 PHP
JS的千分位算法实现思路
2013/07/31 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
2019/02/13 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
python下如何查询CS反恐精英的服务器信息
2017/01/17 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
Python向Excel中插入图片的简单实现方法
2018/04/24 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
Python笔记之代理模式
2019/11/20 Python
Python 创建TCP服务器的方法
2020/07/28 Python
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
父亲生日宴会答谢词
2014/01/10 职场文书
互联网创业计划书的书写步骤
2014/01/28 职场文书
通用自荐信范文
2014/03/14 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
大学新生军训方案
2014/05/03 职场文书
主题实践活动总结
2014/05/08 职场文书
企业员工集体活动方案
2014/08/17 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS