Using CSS to affect div style inside iframe

Question

Is it possible to change styles of a div that resides inside an iframe on the page using CSS only?

Possible duplicate of [How to apply CSS to iframe?](http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe) — Alexander O'Mara, Mar 01 '16 at 22:17
More info about **CORS**: https://wikipedia.org/wiki/Content_Security_Policy and https://developer.mozilla.org/docs/Web/HTTP/CORS — ashleedawg, Feb 16 '20 at 23:56

score 128 · Answer 1 · edited Jul 09 '14 at 07:12

128

You need JavaScript. It is the same as doing it in the parent page, except you must prefix your JavaScript command with the name of the iframe.

Remember, the same origin policy applies, so you can only do this to an iframe element which is coming from your own server.

I use the Prototype framework to make it easier:

frame1.$('mydiv').style.border = '1px solid #000000'

or

frame1.$('mydiv').addClassName('withborder')

edited Jul 09 '14 at 07:12

ascx

473
2
13

answered Feb 24 '09 at 21:51

Diodeus - James MacFarlane

107,156
31
147
171

2

see my this question it's similar http://stackoverflow.com/questions/1962707/how-to-give-style-to-iframed-page-content-using-parent-pages-css but can't we change style if frame is from another server? – Jitendra Vyas Dec 29 '09 at 13:27
16

That is correct. The Iframe content is subject to the same-domain policy. If it's from your domain, you can control it, if not, you're locked out. This prevents all kinds of Iframe-based page hijacking. – Diodeus - James MacFarlane Dec 29 '09 at 16:08
2

Not exactly a "CSS only" solution, but good enough for me. +1 – Nicu Surdu May 22 '13 at 14:20
2

This is not CSS. – stramin Feb 21 '19 at 20:31

score 116 · Answer 2 · edited Jan 12 '17 at 14:35

116

In short no.

You can not apply CSS to HTML that is loaded in an iframe, unless you have control over the page loaded in the iframe due to cross-domain resource restrictions.

edited Jan 12 '17 at 14:35

codename-

12,008
2
24
29

answered Feb 24 '09 at 21:49

mmattax

25,441
39
110
143

65

This is true but don't really help people give an example to of how to – Simon Dragsbæk Sep 27 '13 at 14:24
is this just come up in 2018? I remember that I used to config the style of iframe come from outside. I tried to apply css to iframe that rendered by script but it stil not work.l – Võ Minh Feb 08 '19 at 09:57

score 49 · Answer 3 · edited May 23 '17 at 12:18

49

Yes. Take a look at this other thread for details: How to apply CSS to iframe?

var cssLink = document.createElement("link");
cssLink.href = "style.css";  
cssLink.rel = "stylesheet";  
cssLink.type = "text/css";  
frames['frame1'].document.body.appendChild(cssLink);

edited May 23 '17 at 12:18

Community

1
1

answered Sep 27 '11 at 14:48

Eugene Rosenfeld

692
5
5

4

is frame1 the id of the iframe ?? – Toni Michel Caubet Nov 28 '11 at 17:08
5

Yes, frame1 is the id of the iframe. – Eugene Rosenfeld Dec 15 '11 at 23:49
7

This is no CSS. – stramin Feb 21 '19 at 20:31
8

this we cannot do if we are loading different domain in iframe. – Sunith Saga May 23 '19 at 09:18
`frame1` is the iframe name, not the ID – joseantgv May 04 '20 at 23:47

score 13 · Answer 4 · edited Mar 20 '15 at 19:08

13

You can retrieve the contents of an iframe first and then use jQuery selectors against them as usual.

$("#iframe-id").contents().find("img").attr("style","width:100%;height:100%")

$("#iframe-id").contents().find("img").addClass("fancy-zoom")

$("#iframe-id").contents().find("img").onclick(function(){ zoomit($(this)); });

Good Luck!

edited Mar 20 '15 at 19:08

ASGM

9,243
25
46

answered Mar 11 '15 at 20:34

Riyaz Hameed

897
9
10

13

doesn't work: Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://HOST" from accessing a cross-origin frame. – tubbo Feb 07 '17 at 19:10
@tubbo, in your case, you cannot embed unauthorised sites prevented from XSS. This is only for those looking for their own problems, not hackers :p – Riyaz Hameed Jul 16 '19 at 10:43

score 11 · Answer 5 · answered Feb 24 '09 at 21:56

The quick answer is: No, sorry.

It's not possible using just CSS. You basically need to have control over the iframe content in order to style it. There are methods using javascript or your web language of choice (which I've read a little about, but am not to familiar with myself) to insert some needed styles dynamically, but you would need direct control over the iframe content, which it sounds like you do not have.

score 8 · Answer 6 · answered Jul 24 '14 at 08:23

Use Jquery and wait till the source is loaded, This is how I have achieved(Used angular interval, you can use javascript setInterval method):

var addCssToIframe = function() {
    if ($('#myIframe').contents().find("head") != undefined) {
        $('#myIframe')
                .contents()
                .find("head")
                .append(
                        '<link rel="stylesheet" href="app/css/iframe.css" type="text/css" />');
        $interval.cancel(addCssInterval);
    }
};
var addCssInterval = $interval(addCssToIframe, 500, 0, false);

why dont you use iframe loaded event ? – ProllyGeek Jan 07 '15 at 14:16 — ProllyGeek, Jan 07 '15 at 14:16

score 5 · Answer 7 · edited May 23 '17 at 12:10

5

Apparently it can be done via jQuery:

$('iframe').load( function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
});

https://stackoverflow.com/a/13959836/1625795

edited May 23 '17 at 12:10

Community

1
1

answered Oct 13 '16 at 01:36

adamj

4,049
5
41
58

4

You can't use this anymore because of the same origin policy in Chrome browser. The error message: `Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin **** from accessing a cross-origin frame.` – Mohammad AlBanna Jun 13 '17 at 20:48
@adamj, Can we change overwrite style sheet of iframe element? if yes, kindly add script. – Muhammad Bilal Jul 23 '18 at 07:59
this is an excellent answer if you are NOT using content from another webpage outside of your domain but is perfect if you are dealing with content related to your own page. Like rendering image uploads into iframes and such this is an excellent solution. Thank you @adamj – d0rf47 Jan 15 '21 at 19:18

score 4 · Answer 8 · answered Sep 28 '19 at 23:24

4

Combining the different solutions, this is what worked for me.

$(document).ready(function () {
    $('iframe').on('load', function() {
        $("iframe").contents().find("#back-link").css("display", "none");
    }); 
});

answered Sep 28 '19 at 23:24

Rami Alloush

1,186
2
11
21

score 3 · Answer 9 · answered Dec 15 '15 at 15:03

A sort of hack-ish way of doing things is like Eugene said. I ended up following his code and linking to my custom Css for the page. The problem for me was that, With a twitter timeline you have to do some sidestepping of twitter to override their code a smidgen. Now we have a rolling timeline with our css to it, I.E. Larger font, proper line height and making the scrollbar hidden for heights larger than their limits.

var c = document.createElement('link');
setTimeout(frames[0].document.body.appendChild(c),500); // Mileage varies by connection. Bump 500 a bit higher if necessary

this is potentially very problematic since you have no possible way of ensuring that your timeout will be the correct value. I was attempting the same implementation and opted to use the above poster solution since it can be triggered directly by the iframes content onload event. See adamj's answer — d0rf47, Jan 15 '21 at 19:19

score 3 · Answer 10 · answered Feb 24 '09 at 21:50

3

probably not the way you are thinking. the iframe would have to <link> in the css file too. AND you can't do it even with javascript if it's on a different domain.

answered Feb 24 '09 at 21:50

Al W

7,008
1
17
39

Can you possibly give an example of how this can be done? Do you mean something like ``? – Ant May 06 '11 at 20:33

score 1 · Answer 11 · edited Sep 27 '19 at 11:16

1

Just add this and all works well:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

edited Sep 27 '19 at 11:16

gnat

6,199
101
49
71

answered Sep 26 '19 at 14:42

Wahab Ahmed

55
1
10

not sure whether this is the correct answer to the given question, but it was a great solution to resize the google form to the width of the device, many thanks! – shiftyscales May 26 '20 at 22:11
@shiftyscales I have tried in one of the application and it works perfect – Wahab Ahmed Sep 26 '20 at 19:41

score 0 · Answer 12 · edited May 23 '17 at 12:18

0

Yes, it's possible although cumbersome. You would need to print/echo the HTML of the page into the body of your page then apply a CSS rule change function. Using the same examples given above, you would essentially be using a parsing method of finding the divs in the page, and then applying the CSS to it and then reprinting/echoing it out to the end user. I don't need this so I don't want to code that function into every item in the CSS of another webpage just to aphtply.

References:

edited May 23 '17 at 12:18

Community

1
1

answered Sep 05 '13 at 17:59

eric wiedemann

17
2

The question specifically asks "using CSS only". With that in mind, your answer is wrong. – Serj Sagan Sep 23 '16 at 22:44
This is not CSS. – stramin Feb 21 '19 at 20:32

score 0 · Answer 13 · answered May 30 '15 at 10:41

0

Not possible from client side . A javascript error will be raised "Error: Permission denied to access property "document"" since the Iframe is not part of your domaine. The only solution is to fetch the page from the server side code and change the needed CSS.

answered May 30 '15 at 10:41

Chdid

260
3
7

2

This answer is correct in its' content but relates to JavaScript whereas the question relates to CSS. The answer may be that you need to use JavaScript but you don't say that. The answer also assumes that the content in the iFrame is from a different domain, which is not always the case. Lastly, the exact message will vary from browser to browser. – pwdst Jul 22 '15 at 14:08

Using CSS to affect div style inside iframe

13 Answers13

Linked

Related