如何用纯JavaScript执行外部HTML/SVG文件中的JavaScript代码

这个问题我之前也踩过坑！核心原因是：jQuery的$.ajax在把获取到的内容插入DOM时，会自动检测并执行其中的脚本；但原生XMLHttpRequest（或者fetch）拿到SVG内容后，直接通过innerHTML或appendChild插入的话，浏览器不会自动解析并执行SVG内部的<script>标签——毕竟SVG的脚本环境和HTML有差异，浏览器不会默认触发执行。

下面给你几个靠谱的解决方案，按推荐程度排序：

方案一：提取SVG中的脚本手动执行 #

这是最直接的方法，拿到SVG内容后，先把里面的脚本抽出来，创建新的脚本元素执行，再把SVG插入DOM。

示例代码：

// 用fetch发起请求（XHR也可以，逻辑一样）
fetch('your-svg-file.svg')
  .then(response => response.text())
  .then(svgText => {
    // 创建临时容器解析SVG内容
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = svgText;
    const svgElement = tempDiv.querySelector('svg');

    // 提取并执行SVG中的所有脚本
    const svgScripts = svgElement.querySelectorAll('script');
    svgScripts.forEach(script => {
      const newScript = document.createElement('script');
      // 处理内联脚本和外部脚本
      if (script.textContent) {
        newScript.textContent = script.textContent;
      } else if (script.src) {
        newScript.src = script.src;
      }
      // 可以选择插入到SVG内部或者HTML的head/body
      svgElement.appendChild(newScript);
      // 移除原脚本标签，避免重复
      script.remove();
    });

    // 把处理好的SVG插入到目标容器
    document.getElementById('target-container').appendChild(svgElement);
  })
  .catch(error => console.error('加载SVG失败:', error));

方案二：使用DOMParser解析SVG并处理脚本 #

如果更倾向于用DOM对象操作而不是字符串解析，可以用DOMParser把SVG文本转为DOM节点，再做同样的脚本提取执行：

fetch('your-svg-file.svg')
  .then(response => response.text())
  .then(svgText => {
    const parser = new DOMParser();
    const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');
    const svgElement = svgDoc.documentElement;

    // 提取脚本并执行
    const scripts = svgElement.querySelectorAll('script');
    scripts.forEach(script => {
      const execScript = document.createElement('script');
      if (script.textContent) {
        execScript.textContent = script.textContent;
        // 如果脚本依赖SVG的上下文（比如操作<defs>），可以把脚本插入SVG内部
        svgElement.appendChild(execScript);
      } else if (script.src) {
        execScript.src = script.src;
        document.body.appendChild(execScript);
      }
      script.remove();
    });

    document.getElementById('target-container').appendChild(svgElement);
  });

方案三：用