使用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没有使用文档源，那么我认为你应该直接在iFrame上设置css规则。如果你需要在代码中做这件事，你可以简单地使用$("#frame1").css('myPropertyName'，'myPropertyValue')；

Answer 3

如果要设置iframe的样式，请使用jQuery's css function。

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

但是您不能将样式表附加到单个元素。你更愿意在link to your stylesheet元素中加入你想要的iframe样式。例如：

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