javascript - 样式化 iframe 内容

Question

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

我正在研究 Google 集成并将 iframe 与文档包括在内。

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

这个谷歌文档有我不想显示的菜单（文件，编辑...）。是否有可能针对此元素并为其赋予属性，例如 . 显示：无？或者只是以某种方式隐藏这些元素？

谢谢 ！

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

“似乎”完成了这项工作：http: //jsfiddle.net/Tey5f/3/

或者你可以：

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

Answer 2

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

Answer 3

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

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

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