使用Fetch API嵌入外部HTML后CSS与JavaScript未生效问题咨询

问题原因 #

通过Fetch API获取的HTML内容，内部的link样式标签、script脚本标签不会被浏览器自动加载执行，原因有两个：

• 你只提取了外部HTML中.parent-container对应的DOM元素插入主页面，外部HTML头部的样式、尾部的脚本根本没有被同步插入到主页面的DOM树中
• 就算手动把外部的script标签插入主页面，常规DOM插入操作下浏览器也不会主动执行这类动态插入的脚本，需要特殊处理

修复方案 #

你可以修改主页面的script.js逻辑，提取外部HTML里的样式和脚本手动插入主页面，参考代码如下：

let testSide = document.querySelector('#test-sidebar')
let htmlUrl = './TextBox/index.html'

fetch(htmlUrl)
  .then((result)=>{
    return result.text()
  }).then((html)=>{
    var parser = new DOMParser();
    var doc = parser.parseFromString(html, 'text/html')
    
    // 提取外部HTML的样式标签插入主页面head
    const styleLinks = doc.querySelectorAll('link[rel="stylesheet"]')
    styleLinks.forEach(link => {
      // 避免重复插入已有的CDN样式
      if (!document.querySelector(`link[href="${link.href}"]`)) {
        document.head.appendChild(link.cloneNode(true))
      }
    })

    // 提取外部HTML的脚本插入主页面
    const scripts = doc.querySelectorAll('script')
    scripts.forEach(oldScript => {
      const newScript = document.createElement('script')
      // 复制原脚本的所有属性
      if (oldScript.src) {
        newScript.src = oldScript.src
      } else {
        newScript.textContent = oldScript.textContent
      }
      document.body.appendChild(newScript)
    })

    // 插入需要的DOM元素
    var doDo = doc.querySelector('.parent-container')
    testSide.appendChild(doDo)
  }).catch((error)=>{
    console.log(error)
  })

如果后续还出现样式冲突的问题，可以直接把第二个页面的CSS内容合并到主页面的style.css文件中，避免重复加载。

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