如何获取当前正在执行的 javascript 代码的文件路径

Question

我正在尝试执行类似于 C #include "filename.c" 或 PHP include(dirname(__FILE__)."filename.php") 的操作，但在 javascript 中。我知道如果我可以获得加载 js 文件的 URL（例如标签的 src 属性中给出的 URL），我就可以做到这一点。有什么办法让 javascript 知道这一点吗？

或者，有没有什么好方法可以从同一域动态加载javascript（无需具体了解域）？例如，假设我们有两个相同的服务器（QA 和生产），但它们显然具有不同的 URL 域。有没有办法做类似 include("myLib.js"); 的事情，其中​​ myLib.js 将从加载它的文件的域加载？

抱歉，如果措辞有点令人困惑。

Answer 1

在脚本内：

var scripts = document.getElementsByTagName("script"),
    src = scripts[scripts.length-1].src;

这是有效的，因为浏览器按顺序加载并执行脚本，因此在执行脚本时，包含该脚本的文档肯定会将您的脚本元素作为页面上的最后一个元素。当然，此代码对于脚本来说必须是“全局”的，因此请将 src 保存在以后可以使用的地方。通过将全局变量包装在以下内容中来避免泄漏：

(function() { ... })();

Answer 2

除 Internet Explorer（任何版本）之外的所有浏览器都有 文档。 currentScript，它始终有效（无论文件是如何包含的（异步、小书签等））。

如果您想知道您现在所在的 JS 文件的完整 URL：

var script = document.currentScript;
var fullUrl = script.src;

Tadaa。

Answer 3

我刚刚做了这个小把戏：

window.getRunningScript = () => {
    return () => {      
        return new Error().stack.match(/([^ \n])*([a-z]*:\/\/\/?)*?[a-z0-9\/\\]*\.js/ig)[0]
    }
}

console.log('%c Currently running script:', 'color: blue', getRunningScript()())

✅ 适用于：Chrome、Firefox、Edge、Opera

尽情享受！

Answer 4

如果您的文档中有内联脚本，则此处接受的答案不起作用。为了避免这种情况，您可以使用以下命令仅定位具有 [src] 属性的

/**
 * Current Script Path
 *
 * Get the dir path to the currently executing script file
 * which is always the last one in the scripts array with
 * an [src] attr
 */
var currentScriptPath = function () {

    var scripts = document.querySelectorAll( 'script[src]' );
    var currentScript = scripts[ scripts.length - 1 ].src;
    var currentScriptChunks = currentScript.split( '/' );
    var currentScriptFile = currentScriptChunks[ currentScriptChunks.length - 1 ];

    return currentScript.replace( currentScriptFile, '' );
}

这有效地捕获了最后一个外部 .js 文件，解决了我使用内联 JS 模板遇到的一些问题。

Answer 5

根据此处找到的答案，我得出以下结论：

getCurrentScript.js

var getCurrentScript = function() {
  if (document.currentScript) {
    return document.currentScript.src;
  } else {
    var scripts = document.getElementsByTagName('script');
    return scripts[scripts.length - 1].src;
  }
}

// module.exports = getCurrentScript;
console.log({log: getCurrentScript()})

getCurrentScriptPath.js

var getCurrentScript = require('./getCurrentScript');

var getCurrentScriptPath = function () {
  var script = getCurrentScript();
  var path = script.substring(0, script.lastIndexOf('/'));
  return path;
};

module.exports = getCurrentScriptPath;

顺便说一句：我正在使用 CommonJS
模块格式并与 webpack 捆绑。

Answer 6

我最近发现了一种更简洁的方法，它可以随时执行，而不是在脚本加载时被迫同步执行。

使用 stackinfo 获取当前位置的堆栈跟踪，并获取 info.file 名称位于堆栈顶部。

info = stackinfo()
console.log('This is the url of the script '+info[0].file)

Answer 7

我编写了一个简单的函数，它允许使用 try/catch 方法获取当前 javascript 文件的绝对位置。

// Get script file location
// doesn't work for older browsers

var getScriptLocation = function() {
    var fileName    = "fileName";
    var stack       = "stack";
    var stackTrace  = "stacktrace";
    var loc     = null;

    var matcher = function(stack, matchedLoc) { return loc = matchedLoc; };

    try { 

        // Invalid code
        0();

    }  catch (ex) {

        if(fileName in ex) { // Firefox
            loc = ex[fileName];
        } else if(stackTrace in ex) { // Opera
            ex[stackTrace].replace(/called from line \d+, column \d+ in (.*):/gm, matcher);
        } else if(stack in ex) { // WebKit, Blink and IE10
            ex[stack].replace(/at.*?\(?(\S+):\d+:\d+\)?$/g, matcher);
        }

        return loc;
    }

};

您可以在此处查看它。

Answer 8

完善此处找到的答案：

小技巧

getCurrentScript 和 getCurrentScriptPath

我想出了以下内容：

//Thanks to https://stackoverflow.com/a/27369985/5175935
var getCurrentScript = function() {

  if (document.currentScript && (document.currentScript.src !== ''))
    return document.currentScript.src;
  var scripts = document.getElementsByTagName('script'),
    str = scripts[scripts.length - 1].src;
  if (str !== '')
    return str ;
  //Thanks to https://stackoverflow.com/a/42594856/5175935
  return new Error().stack.match(/(https?:[^:]*)/)[0];

};

//Thanks to https://stackoverflow.com/a/27369985/5175935
var getCurrentScriptPath = function() {
  var script = getCurrentScript(),
    path = script.substring(0, script.lastIndexOf('/'));
  return path;
};

console.log({path: getCurrentScriptPath()})

Answer 9

无论它是脚本、html 文件（例如框架）、css 文件、图像还是其他任何文件，如果您不指定服务器/域，则 html 文档的路径将是默认，因此您可以执行以下操作，例如

或

如果您不提供服务器/域，则路径将相对于任一路径主文档路径的页面或脚本

Answer 10

我可能误解了您的问题，但只要生产和开发服务器使用相同的路径结构，您似乎就应该能够使用相对路径。

<script language="javascript" src="js/myLib.js" />

Answer 11

我整理了一些意大利面条代码，这些代码将使当前的 .js 文件运行（例如，如果您使用“node”运行脚本。您可以使用它来获取正在运行的脚本的目录）

这将其获取为“file” ://path/to/directoryWhere/fileExists"

var thisFilesDirectoryPath = stackinfo()[0].traceline.substring("readFile (".length, stackinfo()[0].traceline.length - ")".length-"readFile (".length);

这需要一个 npm 包（我确信它也在其他平台上）：

npm i stackinfo

import stackinfo from 'stackinfo'; 或 var {stackinfo} = require("stackinfo");

Answer 12

function getCurrnetScriptName() {
    const url = new URL(document.currentScript.src);
    const {length:len, [len-1]:last} = url.pathname.split('/');
    return last.slice(0,-3);
}

Answer 13

在 ES6 模块环境中，当前正在执行的模块的 URL 可以从 'import.meta' 属性获取。请参阅 MDN 文档。

另请参阅 document.currentScript is null （Don Park 的回答）

一个示例：

//generalTests.mjs
getLocation();
function getLocation(){

    console.log("Current script location --->>> "+import.meta.url);

}

下面是 在模块环境中使用，该模块正在 HTML 脚本元素中加载

<body>
    <script type="module" src="generalTests.mjs"></script>
</body>

控制台输出如下：