样式化iframe内容

时间:2012-04-25 18:30:43

标签: javascript jquery html css

是否有可能设置iframe内容的样式?

我正在开发Google集成,并将iframe包含在文档中。

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

这个谷歌文档有菜单(文件,编辑...),我不想显示。有没有可能针对这些元素并给它们属性,如。显示:无?或者只是以某种方式隐藏这些元素?

谢谢!

3 个答案:

答案 0 :(得分:4)

好吧,正如你所说以某种方式

你可以尝试:

<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 */
}

'似乎'做这项工作:http://jsfiddle.net/Tey5f/3/

或者你可以:

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

答案 1 :(得分:2)

无法将样式应用于Google Docs,跨域防护等外部网站。

答案 2 :(得分:0)

这是不可能的。但是,你可以使用代理来加载谷歌的内容:)一旦你配置你的服务器端代理这样的请求只需用这样的东西替换谷歌网址:

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

但是谷歌页面链接的内容可能存在问题,因为现在对docs.google.com的请求是跨域的。