Google Docs iFrame:如何自定义嵌入式Google Docs iFrame的CSS [英] Google Docs iFrame: How to customize the css of an embedded Google Docs iFrame

问题描述

我有一个显示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:

现在，我想将上图中的灰色背景更改为白色背景色，我一直在寻找解决方案，并且提出了

有人知道如何更改灰色背景颜色吗?

编辑 它可以在Google Chrome和Opera上运行，但不能在Firefox或Safari上运行.

解决方案

我不能确定这是否是问题，但是，由于在不同的浏览器中出现的方式不同，我倾向于认为这是一个问题. CSS归一化/重置问题. 此答案具有用于执行此操作的脚本，并且注释中还有其他脚本，因此建议您进行检查. >

I have this code of an iframe displaying a google docs document:

<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>

The iFrame works great and display the following iFrame:

Now i want to change the grey background as seen in the picture above into a white background color, i've been searching for a solution and i come up with this, but it's not working, the background turned white (with my custom css) but google docs didn't work and it displayed a message telling me "something went wrong" inside of the iFrame.

Does anybody know how can i change the grey background color ?

EDIT It works on Google Chrome and Opera but not on Firefox nor Safari.

解决方案

I can't say for certain whether this is the issue or not, but, because it's appearing differently in different browsers, I'm inclined to believe it's a matter of CSS normalizing/resetting. This answer has a script for doing that, and several more are in the comments, so I recommend checking it out.

这篇关于Google Docs iFrame:如何自定义嵌入式Google Docs iFrame的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！