如何在 HTML 在线运行工具中通过脚本注入实现第三方库的动态加载-html教程-PHP中文网

不能直接用 document.createelement('script') 动态加载第三方库后立即调用其 api，因为脚本未执行完、沙盒环境限制全局访问、禁用 eval/function、cors 拦截及路径重写等问题导致失败；推荐使用 type="module" + await import() 方式加载 esm 版本库。

如何在 html 在线运行工具中通过脚本注入实现第三方库的动态加载

不能直接在 HTML 在线运行工具（如 JSFiddle、CodePen、JSBin）里用 document.createElement('script') 加载第三方库后立刻调用其 API——绝大多数情况下会报 ReferenceError，因为脚本还没执行完。

为什么在线工具里动态加载常失败

在线运行工具通常把你的 HTML、CSS、JS 封装进 iframe 或沙盒环境，且默认不暴露全局上下文给动态插入的脚本；更关键的是，它们往往禁用或拦截 eval、Function 构造器，而很多第三方库（比如早期版本的 Lodash、Chart.js）依赖这些机制做运行时模块解析。

在线工具的沙盒策略会阻止 script.src 加载跨域资源（除非目标 CDN 明确允许 Access-Control-Allow-Origin: *）
部分工具（如旧版 CodePen）对 async 脚本的执行时机做额外延迟，导致 onload 触发后仍无法访问挂载的全局变量
你写的 document.head.appendChild(script) 执行了，但脚本实际加载路径可能被工具重写（例如自动加前缀 https://cdn.jsdelivr.net/），而库本身没适配这种路径跳转

安全可行的替代方案：用 `type="module"` + `import()`

现代在线工具基本支持 ES 模块，这是目前最稳定、无需全局污染、且能明确控制加载顺序的方式。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

把第三方库 URL 写成完整 HTTPS 地址，例如：import('https://cdn.jsdelivr.net/npm/chart.js@4.4.0/+esm')
必须用 await import()，不能只写 import() 后直接调用，否则 Promise 未 resolve 就执行会出错
注意某些库（如 jQuery）没有原生 ESM 版本，需找社区打包版，例如：https://cdn.skypack.dev/jquery@3.7.1
若工具提示 CORS error，换用 Skypack 或 JSDelivr 的 ESM 入口，它们会自动转换 CommonJS 模块

遇到 `Uncaught SyntaxError: Cannot use import statement outside a module` 怎么办

说明你把 import 写在了非模块上下文中——在线工具默认把 JS 面板当普通脚本执行，不是模块。

在 JS 面板顶部加一行："use strict"; 不起作用，必须改执行环境
CodePen：点 JS 设置 → “JavaScript Preprocessor” 改为 “TypeScript” 或 “Babel”，或勾选 “Load JavaScript as a module”
JSFiddle：左侧设置栏 → “JavaScript” 标签页 → “Load type” 选 “Module”
JSBin：右上角齿轮图标 → “JavaScript” → 勾选 “ES modules”

别碰 `Document.scripts` 去轮询判断是否加载完成

它在在线工具里几乎无效：脚本节点可能被工具内部移除、重写或根本不插入主文档 DOM；而且它是只读集合，不会随动态插入实时更新。

想等某个库就绪？查它导出的命名空间，比如 await import(...); console.log(typeof Chart)
想等多个库？用 Promise.all([import('a'), import('b')])，比手动管理 onload 可靠得多
如果库只挂载到 window（如 moment），且你非得用传统 script 注入，请确保在 script.onload 回调里检查 typeof window.moment === 'function'，而不是只看 script.readyState