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 相关文章推荐
用js实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
js+css3实现旋转效果
Jan 20 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
js实现小星星游戏
Mar 23 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
世界上第一台立体声收音机
2021/03/01 无线电
php记录代码执行时间(实现代码)
2013/07/05 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
javascript 函数速查表
2010/02/07 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
Bootstrap每天必学之日期控制
2016/03/07 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
python生成日历实例解析
2014/08/21 Python
Python入门之modf()方法的使用
2015/05/15 Python
python3 读取Excel表格中的数据
2018/10/16 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
金属材料工程个人求职的自我评价
2013/12/04 职场文书
工作的心得体会
2013/12/31 职场文书
上级检查欢迎词
2014/01/18 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
2014年政协工作总结
2014/12/09 职场文书
社区服务活动报告
2015/02/05 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
MySQL慢查询的坑
2021/04/28 MySQL
Python趣味挑战之教你用pygame画进度条
2021/05/31 Python
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript