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 条评论
登录 后参与评论

相关文章

来自专栏Android机动车

高效开发 MVVM 和 databinding 你需要使用的工具

有不少同学已经开始使用MVVM作为自己 Android 开发架构了,但实际上,网上有关 MVVM 的资料并不是很多,这主要是因为 MVVM 还是有一定使用门槛...

10320
来自专栏圣杰的专栏

ABP入门系列(14)——应用BootstrapTable表格插件

源码路径:Github-LearningMpaAbp 1. 引言 之前的文章ABP入门系列(7)——分页实现讲解了如何进行分页展示,但其分页展示仅适用于前台we...

84350
来自专栏React

React和Redux——状态管理Flux和Redux

在强调组件化的React中,我们需要以高内聚、低耦合的原则设计高可复用性的组件。因此渲染组件的数据由两部分组成,一个是由父组件传入的Props参数、一个是组件的...

29470
来自专栏北京马哥教育

Python 爬虫:爬取小说花千骨

知识就像碎布,记得“缝一缝”,你才能华丽丽地亮相。 1.Beautiful Soup 1.Beautifulsoup 简介 此次实战从网上爬取小说,需要使用到B...

48850
来自专栏搞前端的李蚊子

ReactJs移动端兼容问题汇总

A:初步怀疑是css属性没有加前缀引发的兼容问题,但添加后发现也不行,通过webview调试后控制台输出Set is undefined,搜索后发现React依...

28150
来自专栏我的博客

Dedecms普通模型入门教程

1. 默认模板设置 里面是default后面变量名字是cfg_df_style(在模版中使用方法是{dede:golbal.cfg_df_style/}获取的路...

37860
来自专栏宏伦工作室

解放你的双手,陪爸妈看春晚去!

22320
来自专栏Flutter入门

Flutter入门三部曲(1) - 基础认识

image.png 看到整体的架构图,它是由dart完成上层的framework,然后由通过skia来完成图形的绘制。

1.7K60
来自专栏逸鹏说道

Jupyter ~ 像写文章般的 Coding

这次选Markdown模式(关于Markdown基础可以看之前写的Markdown Base)

13630
来自专栏Flutter入门

Flutter入门三部曲(1) - 基础认识

看到整体的架构图,它是由dart完成上层的framework,然后由通过skia来完成图形的绘制。

17800

扫码关注云+社区

领取腾讯云代金券