为什么通过fetch获取的HTML文件中的script脚本无法正常执行？

问题原因 #

浏览器出于安全限制，使用innerHTML接口插入的<script>标签不会被解析执行，因此你动态插入的HTML中只有普通DOM元素、样式可以正常加载渲染，脚本逻辑不会触发，这是浏览器的原生特性，目的是降低恶意脚本注入（XSS）的风险。

解决方案 #

你可以在插入HTML后手动提取所有<script>标签，创建新的脚本元素替换原有标签，新创建的脚本插入DOM时会被正常执行，修改后的主页面代码如下：

<!DOCTYPE html>
<html>
<body>
  <script>
    fetch("Onload.html")
      .then((response) => {
        return response.text();
      })
      .then((html) => {
        document.body.innerHTML = html;
        // 处理所有插入的script标签
        const insertedScripts = document.body.querySelectorAll('script');
        insertedScripts.forEach(oldScript => {
          const newScript = document.createElement('script');
          // 复制原有脚本的全部属性
          [...oldScript.attributes].forEach(attr => newScript.setAttribute(attr.name, attr.value));
          // 复制脚本内容
          newScript.textContent = oldScript.textContent;
          // 替换旧脚本，新脚本会自动执行
          oldScript.parentNode.replaceChild(newScript, oldScript);
        })
      });
  </script>
</body>
</html>

注意事项 #

• 该方案仅适用于你获取的动态HTML来源完全可信的场景，如果加载的是不可信第三方的HTML内容，执行其中的脚本会带来安全风险。

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