登录
首页 >  文章 >  前端

ESM 模块中 document.currentScript 失效的原因及其替代方案

时间:2026-05-20 17:30:45 404浏览 收藏

在ESM模块中,`document.currentScript`始终为`null`并非浏览器兼容性缺陷,而是ECMAScript模块规范的主动设计——因为ESM不绑定HTML `

如何理解 ESM 模块在 document.currentScript 判定中的失效及其替代方案

ESM 模块中 document.currentScript 始终为 null,这不是兼容性问题,而是规范行为——模块脚本执行时没有“当前 script 元素”的概念,它不对应 HTML 中的 ),再通过 document.currentScript?.dataset.path 读取;模块脚本则统一走 import.meta.url

常见误用与规避建议

这些做法看似可行,实则隐患明显:

  • document.scripts 取最后一个 script:在异步加载、动态插入或多个 script 并发时不可靠
  • 在 ESM 中尝试 import('./config.js').then(...) 后再读 currentScript:动态导入返回 Promise,此时执行上下文已切换,currentScript 仍为空
  • 依赖 document.write 注入的 script:该方式本身已被现代标准弃用,且 currentScript 指向的是执行 document.write 的那个 script,不是被写入的内容
  • location.hrefdocument.URL 替代:它们返回的是页面 URL,不是当前脚本路径,多页应用中完全不匹配

本质上,currentScript 是面向传统 script 的遗留 API,而 ESM 需要转向更语义化、更稳定的元信息机制。坚持用 import.meta.url 作为主力,辅以构建时注入或 stack 解析兜底,就能覆盖从现代浏览器到 IE11 的全场景。

终于介绍完啦!小伙伴们,这篇关于《ESM 模块中 document.currentScript 失效的原因及其替代方案》的介绍应该让你收获多多了吧!欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识,快来关注吧!

资料下载
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>