Google Docs iFrame：如何自定义嵌入式 Google Docs iFrame 的 css答案

【问题标题】：Google Docs iFrame: How to customize the css of an embedded Google Docs iFrameGoogle Docs iFrame：如何自定义嵌入式 Google Docs iFrame 的 css
【发布时间】：2016-07-08 20:59:59
【问题描述】：

我有一个显示 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），但谷歌文档不起作用，它显示一条消息，告诉我 iFrame 内部“出了点问题”。

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

编辑它适用于 Google Chrome 和 Opera，但不适用于 Firefox 和 Safari。

【问题讨论】：

有趣的问题。希望你能找到解决方案，别忘了在这里分享））
我不认为这样做是个好主意。

标签： iframe google-docs google-docs-api

【解决方案1】：

我不能确定这是否是问题所在，但由于它在不同浏览器中的显示方式不同，我倾向于认为这是 CSS 规范化/重置的问题。 This answer 有一个脚本可以做到这一点，还有几个在 cmets 中，所以我建议检查一下。

【讨论】：

【解决方案2】：

Google 文档目前很乐意通过 CORS 请求提供已发布的文档。

通过将以下脚本标记放在您的 <body> 底部，您的所有 google 文档 iframe 将被替换为包含您的文档的普通 div。

    <script>
        // get all iframes that were parsed before this tag
        var iframes = document.getElementsByTagName("iframe");

        for (let i = 0; i < iframes.length; i++) {
            var url = iframes[i].getAttribute("src");
            if (url.startsWith("https://docs.google.com/document/d/")) {
                // create div and replace iframe
                let d = document.createElement('div');
                d.classList.add("embedded-doc"); // optional
                iframes[i].parentElement.replaceChild(d, iframes[i]);

                // CORS request
                var xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);
                xhr.onload = function() {
                    // display response
                    d.innerHTML = xhr.responseText;
                };
                xhr.send();
            }
        }
    </script>

不再有 iframe 限制。 CSS 将按预期工作。

【讨论】：

由于 CORS，这显然行不通。

【解决方案3】：

在这种情况下，关于 iframe 的样式，可以注意以下几点：

您无法设置从另一个域（跨域）加载的 iframe。
一种解决方法是通过将内联 CSS 提供给使用的 iframe 标记来仅设置 iframe 块（不是 iframe 内容）的样式。
您可以通过首先获取域/服务器中的内容然后从那里提供 iframe 以使其来自同一域并因此可以使用常规 CSS 和 javascript 设置样式来找到它的 hack。

以下链接包含更多详细信息和可用于此场景的脚本示例：How to apply CSS to iframe?

【讨论】：