HTML脚本nomodule属性怎么确保现代环境不重复执行的兼容保障-html教程-PHP中文网

safari 10.1 因未正确实现 nomodule 互斥逻辑，导致模块脚本与 nomodule 脚本双执行，引发初始化重复、事件绑定叠加、api 请求翻倍等问题；需在 legacy-bundle.js 顶部用 document.write 动态注入并 throw 中断执行，且构建产物须完全隔离、降级 api 并禁用动态 import。

html脚本nomodule属性怎么确保现代环境不重复执行的兼容保障

nomodule 属性本身不提供“兼容保障”，它只是个加载开关——现代浏览器看到就跳过，旧浏览器才执行。真正决定是否重复执行的，是浏览器对 type="module" 的识别精度，以及 Safari 10.1 这类“半吊子”浏览器的实现缺陷。

为什么 Safari 10.1 会双执行

Safari 10.1（macOS 10.12.4 / iOS 10.3）能解析 type="module"，但没正确实现 nomodule 的互斥逻辑：它既加载了 app.mjs，又把 legacy-bundle.js 当普通脚本同步执行。结果不是“降级”，而是叠加执行。

UI 初始化两次（document.addEventListener('DOMContentLoaded', init) 被调两次）
事件重复绑定（同一个按钮触发两次点击回调）
API 请求翻倍（fetch('/api/user') 发两次）
内存占用明显升高（两个版本的工具函数、状态管理器同时驻留）

运行时检测必须写在 nomodule 脚本内部

不能靠外部条件判断后插入 <script src></script>，因为 Safari 10.1 已经把 nomodule 脚本加载进来了——你得在它执行前就拦住它。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

正确做法：在 legacy-bundle.js 开头加检测逻辑，用 document.write 动态注入自身（仅对 Safari 10.1）
检测条件是 !('noModule' in document.createElement('script'))，这个表达式在 Safari 10.1 返回 false，其他支持 type="module" 的浏览器返回 true

示例开头代码：

if (!('noModule' in document.createElement('script'))) {
  document.write('<script src="legacy-bundle.js"></script>');
  throw new Error('Skip legacy execution');
}

注意 throw 是必须的——否则后续代码仍会执行，导致双初始化

构建产物必须彻底隔离模块与降级逻辑

哪怕用了运行时检测，如果 legacy-bundle.js 里还引用了 modern-app.js 中的模块变量或函数，旧浏览器照样崩溃。

legacy-bundle.js 必须是独立 IIFE 或 UMD 格式，不含任何 import/export
Babel 配置必须显式设 targets: { ie: '11' }，不能只靠 core-js/stable 补丁
所有 DOM API 调用需降级：用 element.className += ' active' 替代 element.classList.add('active')
避免动态 import()，旧浏览器不识别该语法，直接 SyntaxError