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 相关文章推荐
设置下载不需要倒计时cookie(倒计时代码)
Nov 19 Javascript
js截取函数(indexOf,join等)
Sep 01 Javascript
jquery中ajax学习笔记一
Oct 16 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
javascript获取web应用根目录的方法
Feb 12 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
Vue SSR 组件加载问题
May 02 Javascript
小程序实现背景音乐播放和暂停
Jun 19 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
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
php基于 swoole 实现的异步处理任务功能示例
2019/08/13 PHP
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
详谈javascript异步编程
2016/02/21 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
js简单时间比较的方法
2016/08/02 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
js+html获取系统当前时间
2017/11/10 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
python实现类的静态变量用法实例
2015/05/08 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
python之消除前缀重命名的方法
2018/10/21 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
Python错误的处理方法
2020/06/23 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
写自荐信有哪些不宜?
2013/10/17 职场文书
致跳高运动员广播稿
2014/01/13 职场文书
大专学生求职自荐信
2014/07/06 职场文书
英语感谢信范文
2015/01/20 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
python基于opencv批量生成验证码的示例
2021/04/28 Python
Node实现搜索框进行模糊查询
2021/06/28 Javascript