样式化 iframe 内容

Question

有没有可能对iframe内容进行样式设置？

我正在进行谷歌集成，并包含了一个带有文档的iframe。

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

这个 Google 文档有一个菜单（文件，编辑...），我不想显示。有没有可能针对这些元素并赋予它们属性，比如 .display:none？或者简单地隐藏这些元素？

谢谢！

- collin.sk

---

我必须回答不行，除非iframe被包含在存在于https://docs.google.com域上的文档中。 - Kevin B

Answer 1

嗯，就像你所说的某种程度上，

你可以尝试：

<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'可以胜任：http://jsfiddle.net/Tey5f/3/

或者你也可以：

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

- Toni Michel Caubet

---

不错的技巧，能够完成任务！如果您想在页面上添加其他内容，建议使用相对位置。但是，您答案的第二部分可能会违反跨域策略。 - Matt K

不错的技巧！我稍微配置了一下，它就能胜任工作了！再次感谢 :) - collin.sk

看起来你实际上不能将任何内容添加到 iFrame 中。哦，好吧。 - Nix

Answer 2

无法对外部站点（如Google文档）应用样式，存在跨域防护。

- Matt K

Answer 3

这是不可能的。但是，您可以使用代理来加载谷歌的内容 :) 一旦您配置了服务器端以代理此类请求，只需将谷歌的URL替换为类似于以下内容：

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

但是，由于现在对docs.google.com的请求是跨域的，因此该Google页面链接的内容可能会出现问题。

- lazyhammer