React应用中动态添加多段脚本至head和body并执行的问题

直接通过innerHTML修改document.head或document.body插入脚本时，浏览器只会更新DOM结构，但不会执行插入的<script>标签内的代码，这是浏览器DOM解析的固有规则导致的。以下是可行的处理方案：

处理head_script中的脚本 #

需要从返回的HTML字符串中提取脚本内容，手动创建<script>元素并插入页面：

// 假设scripts为后端返回的响应对象
const headScriptStr = scripts.head_script;
// 匹配所有<script>标签及其内容
const scriptTags = headScriptStr.match(/<script>([\s\S]*?)<\/script>/g) || [];

scriptTags.forEach(tag => {
  // 提取标签内的脚本代码
  const code = tag.replace(/<\/?script>/g, '').trim();
  if (!code) return;

  const scriptEl = document.createElement('script');
  scriptEl.textContent = code;
  document.head.appendChild(scriptEl);
});

处理body_script内容 #

对于包含<noscript>的body内容，可通过临时容器解析后插入，避免innerHTML直接替换带来的问题：

const bodyContentStr = scripts.body_script;
const tempContainer = document.createElement('div');
tempContainer.innerHTML = bodyContentStr;

// 将解析后的节点逐个追加到body
while (tempContainer.firstChild) {
  document.body.appendChild(tempContainer.firstChild);
}

注意事项 #

• 如果body_script中也包含<script>标签，需参照head_script的处理方式单独提取执行，不能依赖innerHTML解析执行。
• 这种手动创建DOM元素的方式，能确保脚本被浏览器正常执行，同时保留noscript等特殊标签的原有功能。

内容的提问来源于stack exchange，提问作者Insan