动态插入含脚本的 html 时，内联或嵌入的 javascript 默认不会触发 `domcontentloaded` 或 `load` 事件，导致初始化逻辑失效；需手动派发事件或显式执行脚本，才能保证动态 js 正确运行。
在现代 Web 开发中，通过 AJAX 或 Fetch 动态加载 HTML 片段（如模态框内容、组件模板等）是常见需求。但若该 HTML 中包含
✅ 正确做法：分两步处理
- 安全插入 HTML 结构（不直接使用 innerHTML 执行脚本）
- 手动触发或模拟加载事件，并执行脚本
示例：安全注入 + 事件补发
// 假设 dynamicHTML 是一个 DocumentFragment 或 HTMLElement（已解析的 DOM 节点）
// 推荐：用 DOMParser 解析字符串，避免 innerHTML 执行脚本风险
function parseHTML(htmlString) {
const parser = new DOMParser();
const doc = parser.parseFromString(htmlString, 'text/html');
return doc.body.firstElementChild || doc.body;
}
// 动态加载并注入
async function loadDynamicContent() {
const response = await fetch('/api/partial');
const htmlString = await response.text();
const container = document.createElement('div');
container.innerHTML = htmlString; // ⚠️ 仅用于演示；生产环境建议用 DOMParser + 手动 script 执行
// 提取并执行所有 ⚠️ 注意事项
- innerHTML 会静默执行
- dispatchEvent(new Event('DOMContentLoaded')) 无法真正模拟原生事件行为（原生事件不可冒泡、不可取消，且仅由浏览器触发），对已有监听器无效；
- 最佳实践是：提取脚本 → 显式创建 ，并统一通过 customEvent 或回调通知初始化；
- 若使用模块化（ESM），需用 import() 动态导入，而非字符串脚本。
✅ 总结
动态注入 JS 的核心原则是：控制执行时机，而非依赖浏览器自动触发。优先采用 DOMParser + 手动 script 注入 + 自定义事件通信 方案，兼顾安全性、可维护性与兼容性。
