如何通过 JQuery 添加不会验证为 HTML5 的 iFrame 属性

Question

我在 HTML5 页面上有一些 iFrame，每个都有“a-iframe”类。页面上大约有 4 个这样的框架，所有不同的形状和大小。

我如何通过类名获取这些框架中的每一个并应用这些属性，这些属性不会被 W3C 验证器在 HTML 中验证：

scrolling="no" frameborder="0" allowtransparency="true"

我当前无法正常工作的代码如下：

<script type="text/javascript">
    $.each($(".a-iframe"), function() 
    {   
        $(this).attr({
            scrolling: "no",
            frameborder: "0",
            allowtransparency: "true"
        });     
     });
</script>

Answer 1

这应该可以解决问题。

$(document).ready(function() {
  $(".a-iframe").each(function() {   
    $(this).attr({
      scrolling: "no",
      frameborder: "0",
      allowtransparency: "true"
    });
    console.log($(this));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe src="#" class="a-iframe" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

Answer 2

玩了一会儿你的代码后，我在jsfiddle上观察到，可能是因为滚动条是否显示是在内容加载时确定的，而不是在设置属性时确定的，所以我改为：

已编辑：这些代码将在我的网络上运行：

$('.a-iframe').attr({
    scrolling: "no",
    frameborder: "0",
    allowtransparency: "true"
  });

当使用选择器时，你会得到所有符合选择器的数组，jquery函数可以一次性应用到它们。

$(function() {

  $('.a-iframe').attr({
    scrolling: "no",
    frameborder: "0",
    allowtransparency: "true"
  });
      
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe class="a-iframe" src="https://jsfiddle.net/"></iframe>
<iframe data-aa="74836" class="a-iframe" src="https://ad.a-ads.com/74836?size=468x60" style="width:468px;height:60px;border:0px;border-width:0px;border-style:none;bor‌​der-color:transparent;background-color:#FFFFFF;overflow:hidden !important;padding: 0px !important;margin: 0px !important;"></iframe>
<iframe class="a-iframe" src="https://validator.w3.org/check"></iframe>