logo标签列表

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

iframegoogle-docsgoogle-docs-api
9

我有这样一段代码，它可以在一个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： Screenshot 现在我想把上面图片中的灰色背景改成白色背景，我一直在寻找解决方案，我找到了这个，但它没有起作用，虽然背景变成了白色（使用我的自定义CSS），但Google文档没有工作，并在iFrame内显示了一条消息告诉我“出了些问题”。
有人知道如何更改灰色背景颜色吗？
编辑 它在Google Chrome和Opera上运行正常，但在Firefox和Safari上不行。
有趣的问题。希望你能找到解决方案，别忘了在这里分享)) - Altenrion
我认为这样做不是一个好主意。 - ANA
3个回答
6

我无法确定这是否是问题的原因，但由于在不同的浏览器中出现了不同的情况，我倾向于认为这是CSS标准化/重置的问题。 这个答案提供了一个执行此操作的脚本，并且评论中还有更多的方案可供参考，建议查看。

6

谷歌文档目前可以通过CORS请求提供已发布的文档服务。

将以下脚本标签放置在您的<body>底部，所有谷歌文档的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问题。 - Xsmael
2
在这种情况下，关于样式化iframe可以注意以下几点：
  1. 你不能样式化从另一个域加载的iframe（跨域）。
  2. 有一种解决方法是仅为使用的iframe标签提供内联CSS来样式化iframe块（而不是iframe内容）。
  3. 你可以通过首先在你的域/服务器中获取内容，然后从那里提供iframe来找到它的hack，使其来自同一域，因此可以使用常规的CSS和javascript进行样式化。
以下链接包含更多详细信息和脚本示例，可用于此场景：如何将CSS应用于iframe？
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接