【问题标题】：google docs iframe - change paddinggoogle docs iframe - 更改填充
【发布时间】：2017-06-13 10:22:07
【问题描述】：

我有一个嵌入的iframe，它已创建发布一个谷歌文档。 iframe 自动为其body 应用一个大的填充，导致文本成为一个非常窄且丑陋的列。我必须改变它。

我已尝试创建自定义指令：

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
        });
    }
}}]);

适用于：

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

但是iframe.querySelector 会返回null 和iframe.contentWindow.document 结果，as expected，在

Uncaught DOMException: Blocked a frame with origin “http://localhost:8100”访问跨域框架。

我已经研究过一种解决方法，但我觉得它有点矫枉过正（例如：safe cross-communication with messages）。

我试图用一些 css 应用到我能到达的地方来对抗填充。例如：

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

应用于iframe 的body 的css 似乎被简单地忽略了。

曾几何时，有一些便利属性，例如marginwidth。也试过了。我还想知道谷歌是否不提供一些“糖”，但谷歌搜索并没有帮助。

注意：它实际上不必是iframe，但我需要在应用程序中以可读的方式显示该格式化的 gdoc；为此，我需要减少填充。

添加插件：https://plnkr.co/edit/XIkgPe7ecLyFfhq1Q3Sv?p=preview

【问题讨论】：

添加要应用Directive的html元素代码
我已经添加了要应用该指令的 html 代码。
曾经看过这个stackoverflow.com/questions/1451208/…
感谢@SaiUnique，但iframe 由谷歌提供。这就是问题所在。
我认为最好有一个父元素来设置iframe 的样式。只需设置父级的样式而不是 iframe

标签： angularjs iframe google-docs

【解决方案1】：

将网址的最后一部分从 true 更改为 false。

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

演示包括所有嵌入元素的使用：

<iframe>、<embed> 和 <object>

Plunker

当你设置embedded=true时，谷歌服务器会在<iframe>里面的内容的<body>添加一个名为.c1的类

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

如果你问我，那只是谷歌的鲁莽行为。我建议你对内容本身设置填充并设置embedded=false。

【讨论】：

这是一个进步。谢谢！但是，在您的 plunker 中的所有场景、<embed> 和 <object> 中，一旦设置“embedded=false”，就会添加一个“由 Google Drive 发布...”框。</object></embed>
@NoIdeaHowToFixThis 您不是唯一一个不欣赏 Google 对已发布文档的粗暴风格的人。这里有一些帮助：gdoc.pub
谢谢@zer00ne -gdoc.pub 是开源的。我将查看 repo 以了解他们最终是如何做到的。
非常欢迎您@NoIdeaHowToFixThis 在您弄清楚 gdoc.pub 之前，您可以尝试向文档本身添加填充或边距。不是最好的选择，但这是 Google 服务的双刃剑：免费但参差不齐的控制，加上文档永远不会完整，因为它们经常更改。

【解决方案2】：

无需使用iframe。您可以使用常规的XMLHttpRequest 在 javascript 中向您的文档发送 CORS 请求至GET。响应是一个 html 文档，您可以阅读、修改或呈现它。

有关示例代码，请参阅此答案：https://stackoverflow.com/a/53965010/8932511

【讨论】：