浏览器端获取当前执行js的文件名

JavaScript 评论

今天有人问我 js 在浏览器执行中怎么获取当前执行文件名？

我第一反应就是用 activeX。但转念一想，这都2023年了， IE 都噶了，还用个篮子的 activeX。

那就再反应一次: “Error Stack”

具体实现

实现起来也比较简单

1
2
3
4
5
6
7
8
9
10
11
12
13
function getCurrentScriptFileName() {
    // 创建一个 Error 对象
    const error = new Error();
    // 获取调用栈信息
    const stack = error.stack;

    console.trace(stack)

    // 在栈信息中查找当前正在执行的脚本文件名
    const matchResult = stack.match(/(http|https):\/\/[^\n]+\.js/);
    // 返回匹配结果
    return matchResult ? matchResult[0] : '';
}

执行效果

写一个小 demo 试试

1
2
3
4
5
<body>

<script src="./zz.js"></script>
<script src="./bb.js"></script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// zz
function main() {
    const filename = getCurrentScriptFileName()

    console.log('file is : ', filename)
}

function getCurrentScriptFileName() {
    // 创建一个 Error 对象
    const error = new Error();
    // 获取调用栈信息
    const stack = error.stack;

    console.trace(stack)

    // 在栈信息中查找当前正在执行的脚本文件名
    const matchResult = stack.match(/(http|https):\/\/[^\n]+\.js/);
    // 返回匹配结果
    return matchResult ? matchResult[0] : '';
}
1
2
// bb
main()

浏览器打印结果：

1
2
3
4
5
6
7
8
9
Error
    at getCurrentScriptFileName (http://localhost:63342/test/zz.js:10:19)
    at main (http://localhost:63342/test/zz.js:3:22)
    at http://localhost:63342/test/bb.js:1:1
getCurrentScriptFileName @ zz.js:14
main @ zz.js:3
(anonymous) @ bb.js:1

file is :  http://localhost:63342/test/zz.js

收尾

妙啊~