为iframe内容设置样式 [英] Styling iframe content

问题描述

有任何风格iframe内容的可能性吗？

我正在使用Google整合功能，包括带有文件的iframe。

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

这个google文档有菜单（文件，编辑...），我不想显示。有可能定位这些元素，并给他们的属性，如。显示：无？或者只是隐藏这个元素？

谢谢！

解决方案

您可以尝试：

  ; div id =trick> 
< iframe /> 
< / div> 
 
 #trick {
 overflow：hidden; / *你必须有一点高度和宽度* / 
} 
 #trick iframe {
 position：absolute; / *或相对。取决于你的标记* / 
 top：-90px / * Asuming你想隐藏的菜单是height * / 
} 
  

'似乎'来完成这项工作： http：// jsfiddle。 net / Tey5f / 3 /

或您可以：

  $（'iframe'）。contents（）。find（'head'）。append（'rel =stylesheettype =text / csshref =myChanges.css/& 
  

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 !

解决方案

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

这篇关于为iframe内容设置样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！