单页应用中异步加载页面的JavaScript无法执行，求解决方法

当你通过innerHTML将异步获取的HTML插入DOM时，浏览器不会自动执行其中的<script>标签（内联脚本和部分外部脚本都不会触发执行），以下是几种可行的解决方法：

方法1：手动提取并执行Script内容 #

获取HTML后先分离出<script>标签，重新创建并插入到DOM中触发执行：

• 实现步骤：
  1. 将返回的HTML字符串转为临时DOM容器
  2. 遍历容器内所有<script>元素
  3. 对每个脚本，创建新的<script>标签，复制原脚本的src（外部脚本）或textContent（内联脚本）
  4. 保留原脚本的属性（如type、async），插入到页面<body>或<head>
  5. 移除临时容器中的原脚本标签，再将处理后的HTML插入目标容器

示例代码：

fetch('template.php?path=login')
  .then(res => res.text())
  .then(html => {
    const tempContainer = document.createElement('div');
    tempContainer.innerHTML = html;

    // 处理所有script标签
    const scripts = tempContainer.querySelectorAll('script');
    scripts.forEach(oldScript => {
      const newScript = document.createElement('script');
      // 处理外部脚本
      if (oldScript.src) {
        newScript.src = oldScript.src;
      } else {
        // 处理内联脚本
        newScript.textContent = oldScript.textContent;
      }
      // 复制原属性
      Array.from(oldScript.attributes).forEach(attr => {
        newScript.setAttribute(attr.name, attr.value);
      });
      document.body.appendChild(newScript);
      // 移除原脚本标签
      oldScript.remove();
    });

    // 插入处理后的页面内容
    document.getElementById('app-container').innerHTML = tempContainer.innerHTML;
  });

方法2：使用DOMParser解析HTML #

通过DOMParser安全解析HTML字符串，再提取并执行脚本：

fetch('template.php?path=login')
  .then(res => res.text())
  .then(html => {
    const parser = new DOMParser();
    const parsedDoc = parser.parseFromString(html, 'text/html');

    // 提取并执行脚本
    const scripts = parsedDoc.querySelectorAll('script');
    scripts.forEach(script => {
      const newScript = document.createElement('script');
      script.src ? newScript.src = script.src : newScript.textContent = script.textContent;
      document.body.appendChild(newScript);
    });

    // 将页面内容插入容器
    document.getElementById('app-container').innerHTML = parsedDoc.body.innerHTML;
  });

方法3：模块化加载脚本（推荐） #

将页面逻辑拆分为ES模块，在加载模板后动态导入对应模块，避免内联脚本执行问题：

• 示例：将登录页逻辑封装在login.js中，导出初始化函数

fetch('template.php?path=login')
  .then(res => res.text())
  .then(html => {
    document.getElementById('app-container').innerHTML = html;
    // 动态导入并初始化登录页逻辑
    import('./login.js').then(module => {
      module.initLoginPage();
    });
  });

注意事项 #

• 避免直接用innerHTML插入带<script>的HTML，浏览器不会自动执行此类脚本
• 外部脚本可添加缓存标记，防止重复请求
• 内联脚本需确保能访问到所需的全局变量或页面元素

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