可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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:

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.

回答1:

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.

回答2:

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

You cannot style the iframe loaded from another domain (Cross domain).
A work around is there to style only the iframe block (Not iframe content) by giving the inline CSS to the iframe tag used.
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?

回答3:

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.