By Iris


2009-02-24 21:46:45 8 Comments

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

13 comments

@Rami Alloush 2019-09-28 23:24:28

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");
    }); 
});

@Wahab Ahmed 2019-09-26 14:42:47

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

@mmattax 2009-02-24 21:49:57

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.

@Simon Dragsbæk 2013-09-27 14:24:12

This is true but don't really help people give an example to of how to

@Võ Minh 2019-02-08 09:57:37

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

@Eugene Rosenfeld 2011-09-27 14:48:39

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

@Toni Michel Caubet 2011-11-28 17:08:25

is frame1 the id of the iframe ??

@Eugene Rosenfeld 2011-12-15 23:49:13

Yes, frame1 is the id of the iframe.

@stramin 2019-02-21 20:31:00

This is no CSS.

@Sunith Saga 2019-05-23 09:18:43

this we cannot do if we are loading different domain in iframe.

@adamj 2016-10-13 01:36:58

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

@Mohammad AlBanna 2017-06-13 20:48:27

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.

@Super Model 2018-07-23 07:59:34

@adamj, Can we change overwrite style sheet of iframe element? if yes, kindly add script.

@Cole Busby 2015-12-15 15:03:38

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

@Chdid 2015-05-30 10:41:14

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.

@pwdst 2015-07-22 14:08:44

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.

@Riyaz Hameed 2015-03-11 20:34:36

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!

@tubbo 2017-02-07 19:10:23

doesn't work: Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "HOST" from accessing a cross-origin frame.

@Riyaz Hameed 2019-07-16 10:43:17

@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

@Priyank Gupta 2014-07-24 08:23:07

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

@ProllyGeek 2015-01-07 14:16:12

why dont you use iframe loaded event ?

@Diodeus - James MacFarlane 2009-02-24 21:51:59

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

@Jitendra Vyas 2009-12-29 13:27:46

see my this question it's similar stackoverflow.com/questions/1962707/… but can't we change style if frame is from another server?

@Diodeus - James MacFarlane 2009-12-29 16:08:43

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.

@Nicu Surdu 2013-05-22 14:20:40

Not exactly a "CSS only" solution, but good enough for me. +1

@stramin 2019-02-21 20:31:56

This is not CSS.

@eric wiedemann 2013-09-05 17:59:06

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:

@Serj Sagan 2016-09-23 22:44:21

The question specifically asks "using CSS only". With that in mind, your answer is wrong.

@stramin 2019-02-21 20:32:59

This is not CSS.

@Justin Lucente 2009-02-24 21:56:15

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.

@Al W 2009-02-24 21:50:34

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.

@Ant 2011-05-06 20:33:22

Can you possibly give an example of how this can be done? Do you mean something like <iframe src="/source" link=css-stylesheet:"/css.css">?

Related Questions

Sponsored Content

104 Answered Questions

[SOLVED] How to horizontally center a <div>?

45 Answered Questions

[SOLVED] How to disable text selection highlighting

22 Answered Questions

[SOLVED] How to write a:hover in inline CSS?

28 Answered Questions

[SOLVED] How do I give text or an image a transparent background using CSS?

  • 2009-04-30 09:00:02
  • Stijn Sanders
  • 1515304 View
  • 2236 Score
  • 28 Answer
  • Tags:   html css opacity

31 Answered Questions

[SOLVED] Is there a CSS parent selector?

  • 2009-06-18 19:59:36
  • jcuenod
  • 1898334 View
  • 3039 Score
  • 31 Answer
  • Tags:   css css-selectors

27 Answered Questions

[SOLVED] How to apply CSS to iframe?

  • 2008-10-20 08:27:14
  • John
  • 1134564 View
  • 981 Score
  • 27 Answer
  • Tags:   html css iframe rss

36 Answered Questions

[SOLVED] Change an HTML5 input's placeholder color with CSS

27 Answered Questions

[SOLVED] Set cellpadding and cellspacing in CSS?

24 Answered Questions

[SOLVED] How do I style a <select> dropdown with only CSS?

31 Answered Questions

[SOLVED] Make a div fill the height of the remaining screen space

  • 2008-09-18 05:06:17
  • Vincent McNabb
  • 937511 View
  • 1793 Score
  • 31 Answer
  • Tags:   html css html-table

Sponsored Content