如何加载外部HTML文件并执行其中的JavaScript代码？

下面是几种可行的解决方案，你可以根据自己的场景选择：

1. 手动提取并重新注入脚本 #

当你通过XHR拿到HTML内容并插入DOM后，原有的<script>标签不会自动执行，你需要把它们提取出来，重新创建script元素并插入DOM：

// 假设responseText是你XHR获取到的HTML内容
const contentContainer = document.getElementById('pageContent');
contentContainer.innerHTML = responseText;

// 遍历所有脚本标签，重新执行
const existingScripts = contentContainer.querySelectorAll('script');
existingScripts.forEach(oldScript => {
  const newScript = document.createElement('script');
  
  // 处理内联脚本内容
  if (oldScript.textContent.trim()) {
    newScript.textContent = oldScript.textContent;
  }
  // 处理外部脚本链接
  if (oldScript.src) {
    newScript.src = oldScript.src;
  }
  // 复制原脚本的属性（比如type、async等）
  Array.from(oldScript.attributes).forEach(attr => {
    newScript.setAttribute(attr.name, attr.value);
  });
  
  // 替换原脚本，确保执行
  oldScript.parentNode.replaceChild(newScript, oldScript);
});

这种方法会完整复刻原脚本的行为，但要注意避免重复加载同一外部脚本，可以用一个全局对象记录已加载的URL做判断。

2. 用DOMParser解析后分离处理 #

先把HTML字符串解析为独立的文档对象，再分别插入内容和处理脚本，逻辑更清晰：

const parser = new DOMParser();
const parsedDoc = parser.parseFromString(responseText, 'text/html');

const contentContainer = document.getElementById('pageContent');
// 先把页面内容插入到容器
contentContainer.appendChild(parsedDoc.body);

// 处理所有脚本
const scripts = parsedDoc.querySelectorAll('script');
scripts.forEach(script => {
  const newScript = document.createElement('script');
  script.src ? newScript.src = script.src : newScript.textContent = script.textContent;
  // 可以插入到head或者内容容器末尾
  document.head.appendChild(newScript);
});

3. 模块化拆分脚本（推荐） #

如果能控制外部HTML的内容，尽量不要把脚本内嵌在HTML里。比如VideoJS的初始化，你可以在主页面中提前引入VideoJS的库，然后在动态HTML插入完成后，手动调用初始化函数：

<!-- 外部HTML只保留结构 -->
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264">
  <source src="my-video.mp4" type='video/mp4'>
</video>

// 插入HTML后手动初始化
contentContainer.innerHTML = responseText;
videojs('my-video', {
  // 你的配置项
}, function() {
  console.log('播放器初始化完成');
});

这种方式更安全、可控，也更容易排查问题，避免动态脚本执行的潜在风险。

注意事项 #

• 动态执行脚本存在XSS风险，务必确保你加载的HTML内容来自可信源。
• 外部脚本是异步加载的，如果有依赖关系，需要用onload事件或者Promise来保证执行顺序。

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