本文介绍一种不依赖 `settimeout` 的可靠方式，用于加载包含 html 片段和 `
在前端动态加载“HTML + 内联 JS”混合内容（如服务端渲染片段或微前端模块）时，常见误区是用 setTimeout 模拟脚本执行完成——这既不可靠（执行时机不确定），又难以调试。根本原因在于：
✅ 正确做法：利用
✅ 安全插入 HTML：禁用 innerHTML +=，改用 insertAdjacentHTML
element.innerHTML += html 会强制重写整个 innerHTML，导致已绑定的事件监听器、Vue/React 组件实例、表单状态等全部丢失。应改用：
- parent.insertAdjacentHTML('beforeend', html) —— 安全追加，保留原有 DOM 结构与绑定；
- 若需兼容 IE11，可添加轻量 polyfill（MDN 提供标准实现）。
✅ 完整优化版实现
loadVanilla: async function(arg, parent = null, callback = null) {
return new Promise(async (resolve, reject) => {
try {
const res = await fetch(arg);
if (!res.ok) {
throw new Error(`HTTP ${res.status}: ${res.statusText}`);
}
const text = await res.text();
// 精确分割：提取 HTML 主体（')[0];
// 创建并配置 script 元素
const scriptEl = document.createElement('script');
scriptEl.textContent = scriptCode; // ✅ 避免 innerHTML 解析风险
scriptEl.onload = () => {
console.log('✅ Script executed successfully:', arg);
resolve(`loaded good ${arg}\n`);
if (callback) callback();
};
scriptEl.onerror = (e) => {
console.error('❌ Script execution failed:', e);
reject(new Error(`Script load error for ${arg}`));
};
// 安全插入 HTML（不破坏现有 DOM）
(parent ?? document.body).insertAdjacentHTML('beforeend', htmlContent);
// 插入脚本（触发执行）
document.body.appendChild(scriptEl);
} catch (err) {
console.error('❌ Load failed:', err);
reject(err);
}
});
}⚠️ 注意事项与最佳实践
- 不要依赖 defer 属性名：若服务端模板中
- 脚本执行上下文：动态插入的脚本运行在全局作用域，this 指向 window，变量会挂载到全局，注意命名冲突；
- CSP 限制：若站点启用了严格 Content-Security-Policy，script.textContent 可能被拦截，此时需改用 blob: URL + src 加载，或服务端调整策略；
- 错误优先原则：始终检查 fetch 响应状态、HTML 结构完整性、脚本提取有效性，避免静默失败。
通过以上改造，你将获得一个零 setTimeout、高可靠性、符合 Web 标准的混合内容加载方案——真正实现“HTML 渲染完成 + 脚本执行完毕”的精准控制。
立即学习“前端免费学习笔记（深入）”；
