Question

我有一个显示google docs文档的iframe代码：

<div itemprop="description" class="col-xs-12 no-h-padding" id="article_desc" style="margin:0 auto; width:90%; float:none;">

  <iframe src="https://docs.google.com/viewer?url=http://example.com/docs/1.pdf&hl=ar&embedded=true" scrolling="no"></iframe>

</div>

iFrame效果很好，并显示以下iFrame：

现在我想将上图中的灰色背景更改为白色背景颜色，我一直在寻找解决方案，我想出了this，但它已经不工作，背景变白（用我的自定义CSS）但谷歌文档没有工作，它显示一条消息，告诉我＆＃34;出了问题＆＃34;在iFrame内部。

有谁知道如何更改灰色背景颜色？

修改它适用于Google Chrome和Opera，但不适用于Firefox和Safari。

Answer 1

我不能肯定这是否是问题，但是，因为它在不同的浏览器中出现的不同，我倾向于认为这是CSS正常化/重置的问题。 This answer有一个用于执行此操作的脚本，还有其他几个在评论中，因此我建议您将其检出。

Answer 2

在此场景中可以注意以下关于iframe样式的点：

您无法设置从其他域（跨域）加载的iframe的样式。
通过将内联CSS提供给使用的iframe标记，可以解决iframe块（非iframe内容）的样式。
你可以通过首先获取你的域/服务器中的内容，然后从那里提供iframe来使用相同的域来制作它，并使用常规的CSS和javascript来设置它。

以下链接包含可在此方案中使用的更多详细信息和脚本示例：How to apply CSS to iframe?

Answer 3

Google文档当前很高兴通过CORS请求提供已发布的文档。

通过将以下脚本标签放在GET /_version的底部，所有Google文档iframe都将替换为包含文档的普通div。

<body>

没有更多iframe限制。 CSS将按预期工作。

Google文档iFrame：如何自定义嵌入式Google文档iFrame的CSS

3 个答案: