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

Question

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

Fad*_*aji 7 iframe google-docs google-docs-api

我有一个显示谷歌文档文档的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>

Run Code Online (Sandbox Code Playgroud)

iFrame效果很好,并显示以下iFrame:

现在我想将上图中的灰色背景更改为白色背景颜色,我一直在寻找解决方案,我想出了这个,但它不起作用,背景变白了(我的自定义css)但谷歌文档没有工作,它显示一条消息告诉我"iFrame内部出了问题".

有谁知道我怎么能改变灰色背景颜色？

编辑它适用于谷歌Chrome和Opera,但不适用于Firefox和Safari.

Answer 1

Jor*_*irk 6

我不能确定这是否是问题,但是,因为它在不同的浏览器中出现的不同,我倾向于认为这是CSS正常化/重置的问题.这个答案有一个脚本可以做到这一点,还有几个在评论中,所以我建议检查出来.

Answer 2

Alk*_*kis 6

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>

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	9 年，8 月前
查看次数：	7411 次
最近记录：	6 年，11 月前