Menu
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.
601
Open your Google Document (or other Google item). Under the "File" menu, click "Publish to the Web". Copy the "iframe" code. On the page you want the Google Doc embedded, click on "Source Code" button from the WYSIWYG editor to open the HTML editor.
go to drive right click your html file choose "open with" then "connect more apps" when app library pop up search for "notepad" then choose "drivenotepad" after it connect to drive, select it, you will get code editor.
This embedded Google Document with default to the size below. If you wish you change the size of the document, click the grey drop down arrow next to the name of the item and select Edit.
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.
103
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.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
