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 相关文章推荐
IE8 原生JSON支持
Apr 13 Javascript
js关闭当前页面(窗口)的几种方式总结
Mar 05 Javascript
js Date概念详细介绍
Nov 22 Javascript
JavaScript中检查对象property的存在性方法介绍
Dec 30 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
JS中的phototype详解
Feb 04 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 Javascript
vue实现前端分页完整代码
Jun 17 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 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+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
解析javascript 实用函数的使用详解
2013/05/10 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
python实现逻辑回归的示例
2020/10/09 Python
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
会计电算化专业个人的自我评价
2013/11/24 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
Python机器学习之决策树和随机森林
2021/07/15 Javascript