动态加载html片段中的script标签默认不执行，需主动提取重建并注入脚本节点；外链脚本需监听load事件或用import()确保执行顺序；须避免重复注入、注意作用域隔离及ie兼容性。
动态加载 html 片段后，其中的 <script></script> 标签默认不会执行——这不是 bug，而是浏览器出于安全考虑（防止 xss）的强制行为。解决的关键不是“绕过限制”，而是**主动提取、重建并注入脚本节点**，让浏览器按正常流程解析执行。
为什么 innerHTML 插入的 script 不运行
当使用 element.innerHTML = htmlString 时，浏览器会将整个字符串作为文本解析并构建 DOM，但明确忽略其中所有 <script></script> 标签的执行逻辑。这些 script 节点虽存在于 DOM 中，但未被引擎注册为可执行脚本，因此函数调用失败、事件绑定无效、变量无法访问。
安全可靠的脚本提取与注入方法
不依赖 eval 或 execScript（有安全与兼容风险），推荐以下 DOM 原生方案：
- 先用
innerHTML渲染完整 HTML 到目标容器 - 用
container.querySelectorAll('script')获取所有 script 元素 - 对每个 script，创建新
script元素：
– 若含src属性，设newScript.src = src；
– 若为内联脚本，设newScript.textContent = script.textContent - 将新 script 追加到
document.head（或document.body），触发执行
处理外链脚本的异步依赖问题
如果 HTML 片段中包含多个 <script src="a.js"></script> 和依赖它的内联脚本，直接顺序注入仍可能报错（a.js 未加载完就执行后续）。此时需：
- 对带
src的 script，监听其load事件，再触发下一个脚本注入 - 或统一改用
import()动态导入（现代浏览器支持），确保模块化执行顺序 - 避免在片段中混用外链与内联强依赖逻辑，建议将业务脚本封装为独立模块，由主页面统一管理加载时机
避免常见陷阱
实际部署中容易踩坑的地方：
- 重复注入：同一脚本多次加载，导致函数重定义或事件重复绑定 → 注入前检查
src或哈希内容是否已存在 - 作用域隔离：动态执行的脚本默认在全局作用域，但若用模块方式（
type="module"），则自带作用域隔离 → 需统一约定模块导出方式 - IE 兼容：旧版 IE 不支持
textContent，可用text属性替代；querySelectorAll在 IE8+ 可用 - 本地开发限制：直接双击打开 HTML 时，
file://协议下部分浏览器禁止外链脚本加载 → 务必启用本地服务器（如 VS Code Live Server）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
