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

目录
相关文章
|
3月前
|
JavaScript API
深入探索fs.WriteStream:Node.js文件写入流的全面解析
深入探索fs.WriteStream:Node.js文件写入流的全面解析
|
1月前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
33 0
|
2月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
67 2
前端JS读取文件内容并展示到页面上
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
混淆指定js文件
【9月更文挑战第26天】JavaScript 混淆旨在保护代码知识产权、减小文件体积和提高安全性。方法包括变量名和函数名混淆、代码压缩、控制流平坦化及字符串加密。常用工具如 UglifyJS 和 JScrambler 可实现这些功能。然而,混淆可能带来兼容性和调试困难等问题,需谨慎使用并确保法律合规。
|
23天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
113 0
|
2月前
|
移动开发 JavaScript 前端开发
js之操作文件| 12-5
js之操作文件| 12-5
|
2月前
|
存储 JSON JavaScript
学习node.js十三,文件的上传于下载
学习node.js十三,文件的上传于下载
|
3月前
|
JavaScript 数据安全/隐私保护
如何在Vue组件中调用封装好的外部js文件方法
这篇文章介绍了如何在Vue组件中调用封装好的外部js文件方法,包括在Vue项目中全局引入外部js文件,并在组件中通过this.$myMethod()的方式调用外部js文件中定义的方法。
如何在Vue组件中调用封装好的外部js文件方法
|
3月前
|
机器学习/深度学习 JavaScript
node.js实现遍历所有文件夹里面的js文件,提取所有的url
node.js实现遍历所有文件夹里面的js文件,提取所有的url
|
3月前
|
前端开发 JavaScript Linux
【Azure 应用服务】在Azure App Service for Linux环境中,部署的Django应用,出现加载css、js等静态资源文件失败
【Azure 应用服务】在Azure App Service for Linux环境中,部署的Django应用,出现加载css、js等静态资源文件失败