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

user_2690982 0
Viewed 14995

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.

google-docs-api google-docs iframe
3 Answers

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.

user_89325110
Related