Adding CSS to iframe using jquery

Question

I'm having a problem using iframes, I'm not actually setting a source for the iframe I insert the html I want using jQuery instead which worked fine with me but my actual problem is that I don't know how to include a style sheet to the iframe.

Check the code below:

<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>

Please define: include a style sheet to the iframe

Jean-Paul
– Jean-Paul

2013-07-30 20:44:38 +00:00
Commented Jul 30, 2013 at 20:44 — Jean-Paul
– Jean-Paul, Commented Jul 30, 2013 at 20:44
I want to add a <link> tag referring to a CSS file

Damarawy
– Damarawy

2013-07-30 20:46:22 +00:00
Commented Jul 30, 2013 at 20:46 — Damarawy
– Damarawy, Commented Jul 30, 2013 at 20:46

Praveen · Accepted Answer · 2013-07-30 20:46:28Z

1

Inline jQuery, I think wrong. better have like this

<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>

Also change your css like below

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

answered Jul 30, 2013 at 20:46

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Damarawy Over a year ago

It's actually working fine with me, the point here is that I want to include a CSS file with iframe for styling the tables added to the iframe

Praveen Over a year ago

@Damarawy If you want to add css via jQuery, then you .css(). If you give a specific style we can try it.

CtrlShiftF11 · Accepted Answer · 2013-07-30 20:53:50Z

0

If you're not using a document source with your iFrame then I believe you should just set css rules directly on the iFrame. If you need to do it in code then you could simply use $("#frame1").css('myPropertyName', 'myPropertyValue');

answered Jul 30, 2013 at 20:53

CtrlShiftF11

1722 silver badges10 bronze badges

4 Comments

Damarawy Over a year ago

Great we're on track, now I don't want to set each property so I'm asking if there's a way to include a style sheet instead?

Praveen Over a year ago

@Damarawy you want to include the entire stylesheet of iframe using jquery?

CtrlShiftF11 Over a year ago

The best thing that you can do with this approach is to call .css using this type of syntax...$(this).css({ "background-color": "yellow", "font-weight": "bolder" });

Damarawy Over a year ago

Ok so the browser accepted the script without errors or warnings, but it's not affecting the iframe style at all!

federicot · Accepted Answer · 2013-07-30 22:21:32Z

0

If you want to style the iframe, use the jQuery's css function.

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

But you cannot attach a stylesheet to a single element. You'd rather link to your stylesheet in the head element and have in it the style you want for your iframe. E.g.:

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

answered Jul 30, 2013 at 22:21

federicot

12.3k19 gold badges71 silver badges111 bronze badges

Collectives™ on Stack Overflow

Adding CSS to iframe using jquery

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related