ReactJS中向<head>/<body>注入含多标签自定义代码并执行脚本

要实现保留所有标签、注释且执行脚本的注入需求，可以按以下步骤处理：

1. 注入非脚本内容（保留注释与普通标签） #

利用insertAdjacentHTML完成基础内容注入，该方法能完整保留注释、<div>、<style>等标签，但不会自动执行脚本，所以需要单独处理脚本部分。

2. 提取并执行脚本 #

通过DOMParser解析自定义代码，精准提取所有<script>标签，再创建新的脚本元素插入文档，确保脚本正常执行。

完整实现代码 #

function injectCustomCode(targetElement, customCode) {
  // 第一步：处理非脚本内容，注入到目标元素
  const tempContainer = document.createElement('div');
  tempContainer.innerHTML = customCode;

  // 先移除临时容器里的脚本标签，避免后续重复处理
  const scriptTags = tempContainer.querySelectorAll('script');
  scriptTags.forEach(tag => tag.remove());

  // 注入剩余的标签和注释
  targetElement.insertAdjacentHTML('beforeend', tempContainer.innerHTML);

  // 第二步：提取并执行所有脚本
  const parser = new DOMParser();
  const parsedDoc = parser.parseFromString(customCode, 'text/html');
  const allScripts = parsedDoc.querySelectorAll('script');

  allScripts.forEach(originalScript => {
    const newScript = document.createElement('script');
    // 复制原脚本的所有属性（如src、type、async等）
    Array.from(originalScript.attributes).forEach(attr => {
      newScript.setAttribute(attr.name, attr.value);
    });
    // 复制脚本内容
    newScript.textContent = originalScript.textContent;
    // 插入到目标元素（也可根据需求插入到head）
    targetElement.appendChild(newScript);
  });
}

// 使用示例
// 向body注入自定义代码
injectCustomCode(document.body, customCodeFooter);
// 向head注入自定义代码
injectCustomCode(document.head, customCodeHeader);

关键说明 #

• 用DOMParser解析代码能准确识别所有脚本标签，包括带外部链接（src属性）的脚本。
• 复制原脚本的全部属性，保证脚本的执行特性和原代码一致。
• 分离非脚本内容和脚本的处理逻辑，既保留了所有HTML结构，又确保脚本能正常执行。

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