如何在Ajax动态添加的广告代码中正确使用script标签

直接用insertAdjacentHTML插入包含<script>标签的HTML字符串，外部脚本不会自动执行——浏览器对通过这种方式插入的脚本有安全限制，不会主动加载并执行带src的外部脚本。

正确的实现方式是拆分步骤：先插入卡片的静态DOM结构，再单独创建并添加script元素，确保脚本能被浏览器加载执行。同时要注意避免重复ID的问题（多次插入会导致DOM ID冲突）。

具体实现代码 #

// 每次Ajax调用时执行这个函数
function addAdCard() {
  // 1. 创建卡片的静态结构（不含script）
  const cardHTML = `
    <div class="card mt-3 mb-3 bg-dark text-white">
      <div class="card-body">
        <h6 class="card-subtitle mb-2 text-muted">Sponsored Content, sorry :(</h6>
        <div class="card-content col d-flex justify-content-center ad-container"></div>
      </div>
    </div>
  `;
  
  // 2. 插入卡片到容器
  const feedContainer = document.getElementById("feed_container");
  feedContainer.insertAdjacentHTML('beforeend', cardHTML);
  
  // 3. 获取刚插入的广告容器（用class定位，避免ID重复）
  const lastAdContainer = feedContainer.querySelector('.ad-container:last-child');
  
  // 4. 创建script元素并设置属性
  const adScript = document.createElement('script');
  adScript.async = true;
  adScript.dataset.cfasync = "false";
  adScript.src = "//pl22464107.profitablegatecpm.com/70dc149ec489e883ffe0c36bd73d05d0/invoke.js";
  
  // 5. 把script添加到广告容器里
  lastAdContainer.appendChild(adScript);
  
  // 可选：创建广告脚本需要的容器（给每个容器设置唯一ID避免冲突）
  const adScriptContainer = document.createElement('div');
  adScriptContainer.id = `container-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
  lastAdContainer.appendChild(adScriptContainer);
}

关键说明 #

• 拆分静态HTML和动态脚本：静态结构用insertAdjacentHTML快速插入，脚本单独创建元素添加，确保浏览器会加载执行。
• 避免重复ID：原代码中的固定ID多次插入会导致DOM冲突，改用class定位容器，或者给每个动态生成的容器设置唯一ID（如时间戳+随机数）。
• 异步脚本处理：保持async属性，不阻塞页面渲染，同时确保脚本能正常加载。

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