CODEWITHSUNDEEP
javascriptjqueryhtmlcss
collin.sk
collin.sk

Reputation: 55

Styling iframe content

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 !

Upvotes: 4

Views: 3085

Answers (3)

lazyhammer
lazyhammer

Reputation: 1228

It's not possible. However, you could use proxy to load google's content :) Once you configured your server side to proxy such request just replace googles urls with something like this:

http://yoursite.com/googleproxy/document/d/1FXbO5XkM5jIcvkqNTEu2EoxmU9UmlyLaa8NPmlcQW1M

But there may be problems with the content linked by that googles page, because now requests to docs.google.com are cross-domain.

Upvotes: 0

Toni Michel Caubet
Toni Michel Caubet

Reputation: 20163

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" />');

Upvotes: 4

Matt K
Matt K

Reputation: 6709

There's no way to apply styles to an external site like Google Docs, cross-domain prevention.

Upvotes: 2

Related Questions