如何在type="module"的脚本中获取当前正在执行的script元素

现行ECMAScript和DOM标准中，没有为ES模块脚本提供可以直接获取对应<script>元素本身的原生等效属性，不存在和普通非模块脚本的document.currentScript完全一致的内置API。

原因说明 #

• 非模块脚本的document.currentScript仅在脚本同步解析执行的阶段生效，和<script>标签的解析时机强绑定
• ES模块支持延迟执行、异步加载、动态导入等特性，执行时机和<script>标签的解析时机完全脱钩，因此标准没有定义对应的内置属性

常用替代实现方案 #

1. 外联静态模块脚本适配方案 #

可以借助你已知的import.meta.url匹配页面中的对应<script>元素，示例代码如下：

// 模块内部执行的代码
const scriptSrc = new URL(import.meta.url).href;
const currentModuleScript = document.querySelector(`script[src="${scriptSrc}"]`);

注意：该方案仅对通过<script type="module" src="xxx">引入的外联静态模块生效，对动态import()加载的模块、内联模块脚本不适用

2. 内联模块脚本适配方案 #

内联模块没有对应的src属性，可以给对应的<script>标签添加唯一标识，在模块内部直接匹配获取即可，示例如下：

<script type="module" id="custom-inline-module">
  const currentInlineScript = document.getElementById('custom-inline-module');
  // 执行后续业务逻辑
</script>

注意事项 #

无论是普通脚本的document.currentScript还是上述替代方案，都仅在脚本同步执行的阶段生效，不要在异步回调（setTimeout、Promise回调、事件回调等）中调用获取，此时上下文已切换，无法拿到正确的脚本元素

内容的提问来源于stack exchange，提问作者Samuel