如何使用JavaScript在多个ins标签内正确插入iframe？

看起来你遇到了一个常见的DOM操作小问题——本来想给每个带.e120x600类的<ins>标签各插入一个iframe，结果单个标签里冒出了两个？咱们来一步步排查并修复这个问题。

问题根源拆解 #

先看你的代码里几个可能踩坑的地方：

1. 重复ID违规：你的HTML里两个<ins>标签都用了id="120x600"，这可是HTML规范的大忌——ID必须是页面唯一的，重复ID很容易导致DOM选择或操作出现各种意外行为。
2. 脚本重复执行：这是最可能导致单个标签里有两个iframe的原因！如果你的脚本被加载了两次（比如不小心在页面里引用了两次，或者某些框架重复触发了执行），就会给每个<ins>插两次iframe。
3. 冗余代码：你的JS里重复写了e.id = "ifrm"，虽然这不会直接生成两个iframe，但会让所有iframe共用同一个ID，同样违反唯一性要求。

修复后的完整代码 #

先修正HTML（给元素唯一ID） #

<ins class="e120x600" id="ad-120x600-1"></ins>
<ins class="e120x600" id="ad-120x600-2"></ins>

再优化JavaScript（避免重复插入+逻辑简化） #

// 等DOM完全加载好再执行，避免找不到元素
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有目标ins元素
  const insElements = document.querySelectorAll('.e120x600');
  
  // 逐个处理每个ins标签
  insElements.forEach((ins, index) => {
    // 从ID里提取尺寸（这里拆分出120x600部分）
    const size = ins.id.split('-')[1];
    const [width, height] = size.split('x');
    
    // 创建iframe元素
    const iframe = document.createElement('iframe');
    
    // 给iframe设置属性，注意每个iframe用唯一ID
    iframe.scrolling = "no";
    iframe.frameBorder = 0;
    iframe.id = `ifrm-${index}`;
    iframe.allow = "autoplay";
    iframe.width = width;
    iframe.height = height;
    
    // 设置样式，用Object.assign更简洁
    Object.assign(iframe.style, {
      border: '0',
      overflow: 'hidden'
    });
    
    // 关键：检查当前ins里有没有iframe，有就不插了，防止重复执行脚本导致多插
    if (!ins.querySelector('iframe')) {
      ins.appendChild(iframe);
    }
  });
});

关键修复点说明 #

• 唯一ID：给每个<ins>和生成的<iframe>都分配唯一ID，彻底避免DOM操作冲突。
• DOMContentLoaded事件：确保脚本在页面元素都加载完成后再跑，不会出现找不到<ins>标签的情况。
• 重复插入检查：加了if (!ins.querySelector('iframe'))判断，就算脚本不小心执行多次，也不会给同一个<ins>插多个iframe。
• 简化尺寸提取：用split替代复杂的substring操作，代码更清晰，也不容易出错。

额外小建议 #

如果你的广告尺寸都是固定的120x600，其实完全不用从ID里提取尺寸，直接硬编码宽高就行，代码会更简洁：

iframe.width = 120;
iframe.height = 600;

要是需要支持多种尺寸，推荐给<ins>加自定义属性data-size，比依赖ID更灵活：

<ins class="ad-unit" data-size="120x600"></ins>
<ins class="ad-unit" data-size="300x250"></ins>

然后JS里这样获取尺寸：

const size = ins.dataset.size;
const [width, height] = size.split('x');

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