专栏首页偏前端工程师的驿站JS魔法堂:获取当前脚本文件的绝对路径

JS魔法堂:获取当前脚本文件的绝对路径

一、前言                        

  当写模块加载器时,获取当前脚本文件的绝对路径作为基础路径是必不可少的一步,下面我们一起来探讨一下这个问题吧!

二、各大浏览器的实现方式                

[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就是当前脚本的绝对路径了。

五、总结                        

 完整的getCurrAbsPath请浏览https://github.com/fsjohnhuang/getCurrAbsPath/blob/master/lib/getCurrAbsPath.js

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Velocity魔法堂系列一:入门示例

    一、前言                             Velocity作为历史悠久的模板引擎不单单可以替代JSP作为Java Web的服务端网页模板...

    ^_^肥仔John
  • Design Pattern: Not Just Mixin Pattern

    Brief                                 从Mix-In模式到Mixin模式,中文常用翻译为“混入/织入模式”。单纯从名字上看...

    ^_^肥仔John
  • JS魔法堂:那些困扰你的DOM集合类型

    一、前言                                     大家先看看下面的js,猜猜结果会怎样吧!   可选答案:   ①. 获取id属...

    ^_^肥仔John
  • 【开源游戏/射击】愤怒的小红帽

    HTML5愤怒的小红帽小游戏是一款益智休闲射击小游戏,游戏中一支箭,一个便当袋,小红帽能平安的到达老奶奶家吗?赶紧一起护送小红帽去奶奶家吧。完成这个神圣的任务,...

    用户5997198
  • 含有echart 图表的报表打印 原

    最近需要打印含有echart图表的报表,采用jqprint插件打印,直接用jqprint打印echart的图不显示,这里需要借助img 来实现

    tianyawhl
  • JavaScript基础考核真题——你能全做对吗?

    正文 JavaScript基础考核真题——你能全做对吗。刘国利 - 独行冰海 : 每位讲师在授课、管理的同时,还需要不断的涉猎各种知识,提升本职技术。本文章的考...

    HTML5学堂
  • 基于WebGL的超逼真仿透明液体流动变形效果教程

    这是一款基于WebGL的超逼真液体流动变形效果。该效果使用PixiJS和GSAP来制作,以轮播图的方式来展现不同类型的液体流动变形效果。液体流动变形效果共5组...

    用户5997198
  • 03 . 前端之JavaScipt

    语法: splice(index,howmany,item1,.....,itemX)

    常见_youmen
  • Wordpress站点自定义HTML 展示经典台词

    zhaoolee
  • 怎么在vue的style标签里面使用变量?

    兄弟,我刚好碰到这个问题。代码里需要不断变更CSS里样式的值(遍历+大量),并通过JS进行设置。基本上要求应该是和你差不多的。 以上所有方法我基本都试过,用了...

    stys35

扫码关注云+社区

领取腾讯云代金券