如何等待全部外部CDN脚本加载完成后执行内联脚本？

核心思路是把外部脚本和内联脚本分开处理：先收集所有外部脚本并等待它们全部加载完成，再统一执行内联代码，彻底避免重复执行的问题。

具体实现步骤 #

• 从要插入的HTML里把<script>标签拆成两类：带src的外部脚本，和不带src的内联脚本。
• 删掉原HTML里的<script>标签，防止浏览器自动乱执行。
• 用Promise批量加载所有外部脚本，等全部加载成功后，再把处理后的HTML插入页面，最后按顺序执行内联代码。

完整代码示例 #

function appendElementWithScripts(htmlString) {
  // 临时容器用来解析传入的HTML
  const tempContainer = document.createElement('div');
  tempContainer.innerHTML = htmlString;

  // 分开存储外部脚本URL和内联脚本代码
  const externalScripts = [];
  const inlineScripts = [];
  const scriptTags = tempContainer.querySelectorAll('script');

  scriptTags.forEach(script => {
    if (script.src) {
      externalScripts.push(script.src);
    } else {
      inlineScripts.push(script.textContent.trim());
    }
    // 移除原script标签，避免浏览器自动加载/执行
    script.remove();
  });

  // 单个外部脚本加载的Promise封装
  function loadScript(src) {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = src;
      script.onload = resolve;
      script.onerror = err => reject(new Error(`加载脚本失败：${src}，错误：${err.message}`));
      document.head.appendChild(script);
    });
  }

  // 等待所有外部脚本加载完成后，再处理页面插入和内联脚本执行
  Promise.all(externalScripts.map(loadScript))
    .then(() => {
      // 把不含script的HTML插入页面
      document.body.appendChild(tempContainer);
      // 按原顺序执行内联脚本
      inlineScripts.forEach(code => {
        try {
          eval(code);
        } catch (err) {
          console.error('内联脚本执行出错:', err);
        }
      });
    })
    .catch(err => {
      console.error('脚本加载流程失败:', err);
    });
}

// 用Splide的例子测试
const splideHtml = `
  <div class="splide">
    <div class="splide__track">
      <ul class="splide__list">
        <li class="splide__slide">Slide 1</li>
        <li class="splide__slide">Slide 2</li>
        <li class="splide__slide">Slide 3</li>
      </ul>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
  <script>
    new Splide('.splide').mount();
  </script>
`;

appendElementWithScripts(splideHtml);

方案优势说明 #

• 解决重复执行问题：用Promise.all确保只有所有外部脚本都加载完成，才会触发一次内联脚本的执行，不会出现单个脚本加载完就执行内联的情况。
• 完全可控顺序：手动接管脚本的加载和执行逻辑，不受浏览器默认的script加载规则限制，适配你无法控制原script位置的场景。
• 保留页面结构：除了被移除后统一处理的script标签，原HTML的其他元素会正常插入页面，保证结构完整。

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