Question

Is there any possibility to style iframe content ?

I am working on Google integration and including iframe with document.

<iframe src="https://docs.google.com/document/d/1FXbO5XkM5jIcvkqNTEu2EoxmU9UmlyLaa8NPmlcQW1M"></iframe>

This google document has Menu(File, Edit …) which i dont want to be displayed. Is there any possibility to target this elements and give them attributes such as . Display:none ? Or simply hide this elements somehow ?

Thanks !

Answer 1

well, as you said somehow,

you could try:

<div id="trick">
   <iframe/>
</div>

#trick{
   overflow:hidden; /* you will have to play a bit with heights and widths*/
}
#trick iframe{
   position:absolute; /*or relative. depending on your markup*/
   top:-90px /* Asuming the menu you want to hide is that height */
}

‘Seems’ to do the job: http://jsfiddle.net/Tey5f/3/

or you could:

$('iframe').contents().find('head').append('rel="stylesheet" type="text/css" href="myChanges.css" />');