How to change/add CSS inside of iframe by jQuery

Question

I want to add css properties in a iframe div by using jQuery but it's not working.

Html Code:-

<html>
    <body>
      <iframe id='iframeId' src='api.php?abc=xyz..'>
        <html>
          <head></head>
          <body>
            <div class='change-class'> //require <div class='change-class' style='background-color:black'>
              .......

            </div>

          </body>
        </html>
      </iframe>
    </body>
</html>

JS Code:-

I try below code but doesn't get any result.

$('.change-class').css('background-color','black');
$("#iframeId").contents().find(".change-class").attr('style','background-color=black');

Is it similar http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe — Saswata Sundar, Sep 09 '15 at 10:39
Are you getting "different origin error" while getting `$("#iframeId").contents().find(".change-class")` — Abhi, Sep 09 '15 at 10:39
i think you shuld forgot about this. because it's not possible untill your css is not in that iframe. — jignesh kheni, Sep 09 '15 at 10:40

score 8 · Accepted Answer · edited Sep 09 '15 at 10:46

8

For this the iframe src document should also have to be on same domain to access iframe's dom nodes, if you have both pages on same domain then you can do this:

$("#iframeId").contents().find(".change-class").css('background-color', 'black');

edited Sep 09 '15 at 10:46

Abhi

4,123
6
45
77

answered Sep 09 '15 at 10:39

Jai

74,255
12
74
103

4

Question... shouldnt it be `.css()` rather than `.attr()`...? – Ahs N Sep 09 '15 at 10:41
3

if both file are on same domain then why he want to add css via javascript. he should add css directly to inside iframe. – jignesh kheni Sep 09 '15 at 10:42
@jigneshkheni sometimes when you don't have ajax implemented but you want to change the view that is where iframe mostly used. – Jai Sep 09 '15 at 10:47
still not working..actually this is a cross domain for iframe. – vineet Sep 09 '15 at 11:17
2

@chotesah then it is not possible due to security reasons. only the pages at same domains can be accessible. – Jai Sep 09 '15 at 11:20
1

Very good, i was really searching for this solution. great work @Jai – Abdul Rahman May 25 '18 at 16:21

score 0 · Answer 2 · answered Sep 09 '15 at 10:42

0

You can find use like this way:

var iframe = $('iframe'); 
$(".change-class", iframe.contents()).addClass('border');

answered Sep 09 '15 at 10:42

guvenckardas

738
4
8

How to change/add CSS inside of iframe by jQuery

2 Answers2