Question

我的网站中有很多图片，每张图片都可以打开一个不同的iframe，其中包含一个与您打开图片的图片相关的互动广告。
问题是，使用我正在使用的代码，我只能打开第一个iframe。
这是我的网站和我正在尝试做的演示。您可以看到，如果单击图像，只有我能打开第一个iframe：
http://kickads.mobi/richmediagallery/index_test_iframe.html

我想知道是否有人可以帮助我解决这个问题。

我正在使用的JS代码是这样的：

<script>
    // Get the modal
    var modal = document.getElementById('MyModal');

    // Get the button that opens the modal
    var div = document.getElementById("myDiv");

    // Get the button that opens the modal
    var img = document.getElementById("myImg");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];   

    // When the user clicks on the button, open the modal 
    div.onclick = function() {
        modal.style.display = "block";
    } 

    // When the user clicks on the button, open the modal 
    img.onclick = function() {
        modal.style.display = "block";
    }  

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }

    var freezeVp = function(e) {
        e.preventDefault();
    }; 
</script>

这是图像如何打开iframe的演示：

 <div id="ad1" class="portfolio-item deporte col-md-3">
     <div class="portfolio-box">
         <div class="portfolio-image-wrap">
             <img id="myImg" src="img/portfolio/image.jpg" alt="" />
         </div>
         <div class="portfolio-caption-mask" id="myDiv">
             <div class="portfolio-caption-text">
                 <div class="portfolio-caption-tb-cell">
                     <h5 class="alt-title">Puzzle ad</h5>
                     <p>Nike Made to fly</p>
                 </div>
             </div>
         </div>
     </div>
 </div>
 <div id="MyModal" class="modal">
     <span class="close">&times;</span>
     <div class="contenido">
         <iframe style="height: 480px; width: 320px" src="http://kickads.mobi/test/ad" frameborder="0"></iframe>
     </div>
 </div>

Answer 1

如前所述，您不能使用相同的ID调用多个元素。两个元素不能具有相同的ID。

如果您想在同一个变量中分配多个元素，建议您使用：var div = document.getElementsByClassName("name"); 更多详细信息here。

打开多个不同的iframe

1 个答案: