Google Docs iFrame: How to customize the css of an

2019-03-27 09:46发布

站内问答 / 移动开发
728 3 2

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

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.

3条回答
forever°为你锁心
2楼-- · 2019-03-27 10:20

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.

查看更多
0人赞 添加讨论(0) 举报
爷的心禁止访问
3楼-- · 2019-03-27 10:20

Following points can be noted in this scenario regarding styling the iframes:

  1. You cannot style the iframe loaded from another domain (Cross domain).
  2. A work around is there to style only the iframe block (Not iframe content) by giving the inline CSS to the iframe tag used.
  3. You can find a hack for it by first fetching the content in your domain/server and then serving the iframe from there to make it from the same domain and hence stylable using the regular CSS and javascript.

Following link has more details and script examples which can be used in this scenario: How to apply CSS to iframe?

查看更多
0人赞 添加讨论(0) 举报
唯我独甜
4楼-- · 2019-03-27 10:21

Google docs is currently happy to serve published documents via CORS requests.

By placing the folowing script tag at the bottom of your <body>, all your google docs iframes will be replaced by plain divs containing your documents.

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

No more iframe restrictions. CSS will work as expected.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)