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

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）但 google 文档不起作用，它显示一条消息告诉我 "something went wrong" 在 iFrame 内部。

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

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

Answer 1

我不能确定这是否是问题所在，但是，由于它在不同浏览器中的显示方式不同，我倾向于认为这是 CSS normalizing/resetting 的问题. This answer 有执行此操作的脚本，评论中还有更多脚本，因此我建议您查看一下。

Answer 2

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

您不能设置从其他域（跨域）加载的 iframe 的样式。
一种解决方法是通过将内联 CSS 提供给所使用的 iframe 标记来仅设置 iframe 块（而非 iframe 内容）的样式。
您可以通过首先获取 domain/server 中的内容然后从那里提供 iframe 以使其来自同一域并因此使用常规 CSS 和javascript.

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

Answer 3

Google docs 目前很乐意通过 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 将按预期工作。

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

Google Docs iFrame: How to customize the css of an embedded Google Docs iFrame

iframe

google-docs

google-docs-api