如何在指定div内正确渲染并执行插入的外部广告脚本代码

问题根因 #

• 你现有代码中获取的容器ID为adsmoneytizer，和你预先准备的目标容器IDmyid不一致，导致代码操作的不是正确的DOM节点
• 直接使用innerHTML插入的<script>标签会被浏览器默认标记为已执行状态，不会触发加载和运行逻辑
• 你之前调用eval()传入的是HTML字符串，不是可执行的JavaScript代码，完全无法生效

正确实现代码 #

// 拿到广告代码和目标容器
const adCode = app.forum.attribute('adscode') || '';
const targetContainer = document.getElementById('myid');

// 清空目标容器原有内容
targetContainer.innerHTML = '';

// 创建临时DOM节点解析广告代码
const tempDiv = document.createElement('div');
tempDiv.innerHTML = adCode;

// 遍历所有子节点逐个插入，特殊处理script标签
while (tempDiv.firstChild) {
  const node = tempDiv.firstChild;
  if (node.tagName === 'SCRIPT') {
    // 手动重建script标签保证浏览器执行
    const newScript = document.createElement('script');
    // 复制原script的全部属性
    Array.from(node.attributes).forEach(attr => {
      newScript.setAttribute(attr.name, attr.value);
    });
    // 兼容内联脚本的内容复制
    newScript.textContent = node.textContent;
    targetContainer.appendChild(newScript);
  } else {
    // 普通DOM节点直接插入
    targetContainer.appendChild(node);
  }
}

注意事项 #

• 只有确认广告代码为可信来源时再使用该方案，直接执行第三方插入的脚本存在XSS注入风险
• 如果你当前使用前端框架，框架内置的HTML渲染能力（如Vue的v-html、React的dangerouslySetInnerHTML）同样默认不执行插入的script标签，也可复用上述手动处理脚本的逻辑

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