document.currentScript返回Null问题求助（非回调/异步场景）

问题分析 #

document.currentScript 仅在脚本同步执行的阶段有效，一旦脚本执行完毕，这个属性就会被重置为 null。你遇到的问题大概率是因为脚本并非在DOM解析时同步执行，而是在模态框加载的异步回调（比如弹窗渲染完成后的事件、动态插入脚本的延迟执行）中调用，此时脚本已经执行完毕，自然拿不到当前脚本节点。

另外，import.meta 无效的原因通常是脚本没有以ES模块方式加载——只有添加了 type="module" 的脚本才能访问 import.meta 对象。

解决方案 #

1. 在脚本同步执行时立即保存引用 #

如果是内联脚本，确保在脚本自身的同步代码里捕获 currentScript，再在后续异步逻辑中使用保存的变量：

<script>
  // 同步执行阶段捕获，保存到变量
  const thisScript = document.currentScript;
  
  // 模态框相关的异步逻辑
  document.getElementById('modal').addEventListener('show', () => {
    console.log(thisScript); // 这里能正确拿到脚本节点
  });
</script>

2. 动态插入脚本的处理 #

如果是动态创建脚本并插入到模态框相关DOM中，要在脚本内容里直接同步捕获 currentScript，不要依赖外部回调：

const script = document.createElement('script');
script.textContent = `
  // 脚本执行时同步捕获
  const thisScript = document.currentScript;
  console.log(thisScript); // 输出当前脚本节点
`;
// 插入到模态框容器或页面中
document.getElementById('modal-container').appendChild(script);

3. 正确使用 import.meta #

要让 import.meta 生效，必须将脚本标记为ES模块：

<script type="module">
  // 此时能正常获取当前脚本的URL
  console.log(import.meta.url);
</script>

动态插入模块脚本时，同样需要设置 type="module"：

const script = document.createElement('script');
script.type = 'module';
script.textContent = `
  console.log(import.meta.url);
`;
document.body.appendChild(script);

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