怎么在HTML中通过nomodule属性为旧浏览器提供降级回退脚本-html教程-PHP中文网

nomodule属性不是兼容旧浏览器的开关，而是让现代浏览器忽略该脚本；旧浏览器因不识别nomodule而照常执行它。必须成对使用type="module"和nomodule脚本，各自独立、语法分离：module脚本用ES6+特性，nomodule脚本须为ES5、无模块语法且含必要polyfill。

怎么在html中通过nomodule属性为旧浏览器提供降级回退脚本

nomodule 属性只对 `<script></script>` 标签生效

它不是用来“兼容旧浏览器”的开关，而是告诉支持 module 的现代浏览器：这个脚本请忽略。真正被旧浏览器执行的，反而是带 nomodule 的那个脚本——因为旧浏览器根本不认识 nomodule，直接无视该属性，照常加载执行。

所以关键逻辑是：module 脚本给新浏览器，nomodule 脚本给旧浏览器（实际是旧浏览器“被迫”执行它）。

必须同时提供两个 <script></script>：一个带 type="module"，一个带 nomodule
两个脚本不能有依赖关系，应各自独立完成功能（比如都初始化同一个 UI 组件）
nomodule 脚本不能用 ES6+ 语法（如 const、箭头函数、模块导入），否则旧浏览器会报 SyntaxError

正确写法：双 script 并存，路径与内容严格分离

常见错误是把 nomodule 当成“fallback 属性”加在 module 脚本上，比如：<script type="module" nomodule src="app.js"></script>——这毫无意义，现代浏览器既识别 type="module" 又看到 nomodule，会跳过；但旧浏览器不认识 type="module"，又忽略 nomodule，结果谁都不执行。

正确结构如下：

<script type="module" src="app.mjs"></script><script nomodule src="app.fallback.js"></script>

app.mjs 可用 import、export、async/await 等现代特性
app.fallback.js 必须是 IIFE 或全局变量形式，用 ES5 语法打包（例如通过 rollup --format iife --output.dir dist）
两个文件输出的 DOM 效果应一致，比如都调用 initSearchBox()，但实现方式不同

注意 Safari 10.1 的怪异行为：nomodule 被误判为 module

Safari 10.1（macOS 10.12.4 / iOS 10.3）存在一个已知 bug：它识别 type="module"，但会错误地也执行带 nomodule 的脚本。结果就是新旧两套逻辑都被触发，可能造成重复初始化或冲突。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

缓解方案是加一个运行时检测：

<script nomodule>
  if (!('noModule' in document.createElement('script'))) {
    document.write('<script src="app.fallback.js"></script>');
  }

利用 noModule 属性是否存在来判断浏览器是否真正支持 nomodule 语义
只有 Safari 10.1 这类“半吊子”浏览器会进入 document.write 分支
现代浏览器和真正老旧的 IE 都不会执行这段内联脚本里的 document.write

构建流程中容易漏掉的兼容性检查点

很多人以为只要写了 nomodule 就万事大吉，结果上线后旧用户白屏。问题往往出在构建环节：

app.fallback.js 没有经过 Babel 处理（比如漏了 @babel/preset-env 配置 targets: { ie: '11' }）
打包工具把 process.env.NODE_ENV 注入到了 fallback 脚本里，导致 IE11 报 ReferenceError: process is not defined
用了 fetch 或 Promise 但没配 polyfill（nomodule 脚本里必须自己 import 或内联 polyfill）
路径写错，比如 src="js/app.fallback.js" 实际文件在 /static/js/ 下，404 导致静默失败