使用 innerHTML 插入包含 <script> 标签的 HTML 时，脚本不会自动执行——这是浏览器的安全机制；本文详解原理、提供可复用的解决方案，并给出生产级替代建议。
使用 innerhtml 插入包含 `<script>` 标签的 html 时，脚本不会自动执行——这是浏览器的安全机制；本文详解原理、提供可复用的解决方案，并给出生产级替代建议。</script>
当通过 element.innerHTML = htmlString 动态插入 HTML 内容时，其中内联的 <script> 标签（如 <script>console.log('hello')</script>）不会被解析和执行。这是浏览器的明确行为规范：为防止 XSS 和意外执行，DOM 解析器会忽略 innerHTML 赋值过程中产生的 <script> 元素的执行逻辑，即使它们语法正确、位于同源页面中。
例如，以下代码看似合理，但实际无效：
<div id="content">Loading...</div>
<script>
const redirectHtml = `
<div id="docooljs">I like cats</div>
<script>document.getElementById("docooljs").style.color = "green";<\/script>
`;
document.getElementById("content").innerHTML = redirectHtml;
</script>尽管 DOM 中确实渲染出了 <div> 和 <script> 元素，但后者不会运行——你将看到“I like cats”仍为默认黑色文字。
✅ 正确做法：手动提取并重执行脚本
核心思路是——先插入 HTML，再遍历所有新插入的 <script> 元素，用 document.createElement('script') 显式创建新脚本节点并注入 DOM。这会触发浏览器正常的脚本加载与执行流程：
function executeScriptsIn(element) {
// 确保 element 已完成 innerHTML 更新
const scripts = element.querySelectorAll('script');
scripts.forEach(script => {
const newScript = document.createElement('script');
// 复制属性：type、src、async、defer 等（如有）
Array.from(script.attributes).forEach(attr => {
newScript.setAttribute(attr.name, attr.value);
});
// 复制内容（内联脚本）
if (script.textContent) {
newScript.textContent = script.textContent;
}
// 替换原 script 节点（触发执行）
script.replaceWith(newScript);
});
}
// 使用示例
const content = document.querySelector('#content');
content.innerHTML = redirectHtml;
executeScriptsIn(content); // ✅ 现在脚本将正常运行⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 不要直接 eval() 或 new Function()：绕过解析直接执行字符串存在严重 XSS 风险，尤其当 redirectHtml 来自用户输入或远程 API。
- src 脚本需注意跨域与缓存：若 <script src="..."> 存在，createElement 会自动发起请求；确保资源同源且可访问。
- 执行顺序与依赖：动态脚本按 DOM 顺序执行，但无法保证与原始 HTML 中的 DOMContentLoaded 或其他生命周期同步。复杂逻辑建议封装为模块化函数并显式调用。
- 避免重复执行：若多次调用 executeScriptsIn()，需过滤已处理过的 script（例如加 data-processed 属性标记）。
? 为什么 YouTube 不 reload 却能“无缝跳转”？
YouTube 实际采用的是 现代前端路由方案（如 History API + SPA 架构）：
- 点击视频时，JS 拦截点击事件 → 调用 history.pushState() 更新 URL → 手动渲染新页面组件（React/Vue 等框架驱动）→ 仅更新必要 DOM 区域；
- 所有逻辑由主应用统一管理，无需动态注入不可信 HTML 或 <script>；
- 这比 innerHTML + script 执行 更安全、可维护、可调试。
? 总结：
- innerHTML 不执行 <script> 是设计使然，非 bug；
- 若必须动态加载脚本，请用 createElement('script') 显式注入；
- 长期项目应优先采用基于 History API 的单页应用（SPA）架构，配合模块打包工具（如 Webpack/Vite），从根本上规避此类问题；
- 对于简单场景，上述 executeScriptsIn() 函数可封装为通用工具，但务必确保 HTML 来源可信。
