浏览器解析执行中的HTML字符串需显式处理：innerHTML等API插入的脚本默认不执行；必须用DOMParser解析后手动创建script元素并append，或动态创建script标签加载执行。
浏览器如何解析并执行 <script></script> 中的 HTML 字符串
HTML 本身不会“执行”——它被浏览器解析为 DOM 树，而真正能执行的是 JavaScript。所谓“执行 HTML 代码”，实际是指用 JS 动态生成或插入 HTML 字符串，并让浏览器重新解析渲染。关键在于：字符串必须经过 innerHTML、outerHTML、document.write() 或 DOMParser 等机制触发解析，且其中的 <script></script> 标签默认**不自动执行**（除非满足特定条件）。
-
innerHTML = "<div>hello</div> <script>console.log('run')</script>"：HTML 被插入，但内联<script></script>**完全被忽略**（现代浏览器出于安全默认禁用） -
document.write("<script>alert(1)</script>")：仅在页面加载中有效，且会清空整个文档；已废弃，不应使用 - 想让脚本执行，必须显式创建
script元素并调用appendChild()或eval()（不推荐）
innerHTML 插入含 <script></script> 的字符串为何没反应
这是最常踩的坑：把带 <script></script> 的 HTML 字符串赋给 innerHTML，控制台没报错，但脚本就是不运行。原因很直接——W3C 规范明确要求：通过 innerHTML、insertAdjacentHTML() 等 API 插入的 <script></script> 标签，其内容**不会被浏览器执行**，也不会触发 onload 或 onerror。
- 该行为与是否在
head或body中无关，是统一限制 - 即使字符串里写了
<script src="a.js"></script>，src属性会被解析，但资源**不会加载**（Chrome/Firefox 均如此） - 绕过方式只有两种：
DOMParser+ 手动执行，或用createElement("script")+textContent+appendChild()
安全且可控地执行动态 HTML 中的脚本
如果业务确实需要动态加载并执行 HTML 片段（比如富文本编辑器预览、微前端模板注入），必须手动提取并运行 <script></script>。不能依赖浏览器自动行为。
const htmlStr = `<div id="app">loaded</div><script>console.log('dynamic script'); document.getElementById('app').style.color = 'red';</script>`;
const parser = new DOMParser();
const doc = parser.parseFromString(htmlStr, 'text/html');
const div = document.createElement('div');
div.appendChild(doc.body.firstChild); // 插入 div
// 提取所有 script 标签并执行
doc.querySelectorAll('script').forEach(script => {
const s = document.createElement('script');
s.textContent = script.textContent;
document.head.appendChild(s); // 或 append to target container
});
document.body.appendChild(div);
-
DOMParser是唯一能安全解析 HTML 字符串为真实 DOM 节点的方式（比正则/字符串拼接可靠） - 必须用
script.textContent而非script.innerHTML，避免二次解析风险 - 注意作用域：动态执行的脚本运行在全局上下文，无法访问外层函数变量
- 若含
src，需额外用fetch加载后eval()或创建script标签
为什么 eval() 不是好选择
有人尝试用 eval() 直接执行从 HTML 中提取的脚本字符串，这看似简单，但隐患极多：
立即学习“前端免费学习笔记（深入）”；
-
eval()执行代码在当前作用域，可能污染变量、覆盖已有函数 - 无法处理
async脚本或模块语法（import），会直接报错 - 违反 CSP（Content Security Policy）策略，多数生产环境禁用
unsafe-eval - 若 HTML 来自用户输入，
eval()是 XSS 高危入口，等同于执行任意代码
真正要执行远程脚本，应走标准流程：fetch() → 检查 MIME 类型 → 创建 script 元素 → 设置 src 或 textContent → appendChild()。动态 HTML 中的脚本逻辑，最好一开始就设计为可模块化调用，而非靠字符串拼接触发。
