google docs iframe - change padding

Question

I have an embedded iframe that has been created publishing a google doc. The iframe automatically applies a large padding to its body resulting in the text being a very narrow and ugly column. I have to change that.

I have tried to create a custom directive:

app.directive('iframeWithStyle', [function(){
return {
    restrict: 'A',
    link: function(scope, element, attrs){
        element.on('load', function(){
               var iframe = element[0];
               var grabbedElement = iframe.querySelector("body");
               // -> grabbedElement is null here
        });
    }
}}]);

which is applied to:

<iframe iframe-with-style
        src="https://docs.google.com/document/d/somethingABC123/pub?embedded=true">
</iframe>

but iframe.querySelector returns null and iframe.contentWindow.document results, as expected, in

Uncaught DOMException: Blocked a frame with origin "http://localhost:8100" from accessing a cross-origin frame.

I have looked at a workaround but I have a feeling that it's overkill (ex: safe cross-communication with messages).

I tried to fight the padding with some css applied to what I can reach. For example:

iframe {
  padding: 0px !important;
  margin-left: -50px;
  margin-right: 50px;
}

css applied to the body of the iframe seems to be simply ignored.

Once upon a time there were some convenience attributes, such as marginwidth. Tried that too. I was also wondering if google does not offer some "sugar" but googling around did not help.

Note: it really does not have to be an iframe, but I need to show that formatted gdoc within the app in a way that it is readable; and for that I need to reduce that padding.

Adding a plunker: https://plnkr.co/edit/XIkgPe7ecLyFfhq1Q3Sv?p=preview

Add html element code to which you are applying the `Directive` — Mr_Perfect, Jun 13 '17 at 10:40
I have added the html code to which I am applying the directive. — NoIdeaHowToFixThis, Jun 13 '17 at 10:45
Once look into this https://stackoverflow.com/questions/1451208/access-iframe-elements-in-javascript — Sai, Jun 13 '17 at 10:58
Thanks @SaiUnique, but the `iframe` is served from google. That's the problem. — NoIdeaHowToFixThis, Jun 13 '17 at 11:02
I think it's better to have a parent element to styles the `iframe`. just style the parent instead of `iframe` — Mr_Perfect, Jun 13 '17 at 11:10
@Mr_Perfect - I saw that one. It's not really clear to me how I could change css with that and still I have the feeling that it might be an overkill. — NoIdeaHowToFixThis, Jun 13 '17 at 11:17

zer00ne · Accepted Answer · 2017-06-15T14:49:17.703

8

Change the last portion of your url from true to false.

https://docs.google.com/document/d/1s2nOQZ39dKD-hsmox5twmmKKkuXzOopT1eXFbMh5DeE/pub?embedded=false

The demo includes use of all of the embedded elements:

<iframe>, <embed>, and <object>

Plunker

When you set embedded=true Google server will add a class named .c1 to the <body> of the content inside the <iframe>

.c1 {
    background-color: rgb(255, 255, 255);
    max-width: 468pt;
    padding: 72pt 72pt 72pt 72pt;
 }

That's just plain reckless of Google if you ask me. I suggest that you set padding on the content itself and set embedded=false.

edited Jun 15 '17 at 14:49

answered Jun 15 '17 at 14:21

zer00ne

31,838
5
32
53

1

This is a step forward. Thanks! However, there's a "Published by Google Drive ... " box that gets added once setting `embedded=false", in all the scenarios , <embed>, and <object> in your plunker.</object></embed> – NoIdeaHowToFixThis Jun 15 '17 at 15:55
@NoIdeaHowToFixThis You're not the only one that doesn't appreciate Google's heavy handed styling of published documents. Here's something that'll help: https://gdoc.pub/ – zer00ne Jun 16 '17 at 22:31
Thank you @zer00ne -gdoc.pub is open source. I will have a look at the repo to understand how they ultimately did the trick. – NoIdeaHowToFixThis Jun 21 '17 at 09:31
You are very welcome @NoIdeaHowToFixThis Until you figure out gdoc.pub, you can try adding padding or margins to the document itself. Not the greatest of choices but that's the double edged sword of Google services: free but spotty control, plus documentation is never complete because they change things often. – zer00ne Jun 21 '17 at 09:53

score 0 · Answer 2 · answered Dec 29 '18 at 15:37

There's no need to use an iframe. You can send a CORS request to GET your document in javascript using a regular XMLHttpRequest. The response is an html document which you can read, modify or render.

See this answer for some example code: https://stackoverflow.com/a/53965010/8932511

google docs iframe - change padding

2 Answers2

Plunker