jquery - 使用 jquery 将 CSS 添加到 iframe

Question

我在使用 iframe 时遇到问题，我实际上并没有为 iframe 设置源，而是使用 jQuery 插入我想要的 html，但我的实际问题是我不知道如何包含样式工作表到 iframe。

检查下面的代码：

<button id="print1" onclick="  $('#frame1').contents().find('body').html($('#div1').html() + $('#tabs-4').html() + $('#tabs-5').html()+ $('#tabs-6').html() ); window.frames['frame1'].print();">Print full report</button>
<iframe id="frame1" style="visibility:hidden;" height=1px></iframe>

Answer 1

内联jQuery，我想错了。最好有这样的

<script type="text/javascript">
$('button').on('click', function() {
  $('#frame1').contents().find('body').html($('#div1').html() + $('#tabs-4').html() + $('#tabs-5').html()+ $('#tabs-6').html() ); 
  window.frames['frame1'].print();
});
</script>

也改变你的CSS如下

<iframe id="frame1" style="visibility:hidden; height:1px"></iframe>

Answer 2

如果要设置iframe的样式，请使用jQuery 的 css 函数。

$('#frame1').css({
   'property1': 'value',
   'property2': 'value',
   .
   .
   .
   'propertyN': 'value',
});

但是您不能将样式表附加到单个元素。您宁愿在 head 元素中链接到您的样式表，并在其中包含您想要的 iframe 样式。例如：

#frame1 {
    /* Style of the iframe. */
}

Answer 3

如果您没有在 iFrame 中使用文档源，那么我相信您应该直接在 iFrame 上设置 css 规则。如果您需要在代码中执行此操作，则可以简单地使用 $("#frame1").css('myPropertyName', 'myPropertyValue');