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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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                            lt link rel  stylesheet  href  app css iframe css  type  text css    gt              interval cancel addCssInterval            var addCssInterval    interval addCssToIframe  500  0  false

User · Answer

Apparently it can be done via jQuery      iframe   load  function            iframe   contents   find  head          append     lt style type  text css  gt    my-class display none     lt  style gt            https   stackoverflow com a 13959836 1625795

User · Answer

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

User · Answer

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

User · Answer

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    Printing content of IFRAME  Accessing and printing HTML source code using PHP or JavaScript http   www w3schools com js js htmldom html asp http   www w3schools com js js htmldom css asp

User · Answer

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

User · Answer

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

User · Answer

Just add this and all works well    lt meta name  viewport  content  width device-width  initial-scale 1 0  maximum-scale 1 0  user-scalable 0  gt

User · Answer

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

User · Answer

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

[css] Using CSS to affect div style inside iframe

Examples related to css

Examples related to iframe