google 文档 iframe - 更改填充

Question

我有一个嵌入式 iframe，它已创建并发布 google 文档。 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 returns null 和 iframe.contentWindow.document 结果 as expected，在

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

我看过一个解决方法，但我觉得它有点过头了（例如：safe cross-communication with messages）。

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

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

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

曾几何时，有一些方便的属性，例如marginwidth。也试过了。我也想知道 google 是否不提供一些 "sugar" 但谷歌搜索没有帮助。

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

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

Answer 1

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

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

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

<iframe>、<embed> 和 <object>

Plunker

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

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

如果你问我，那简直就是 Google 的鲁莽。我建议您在内容本身上设置填充并设置 embedded=false.

Answer 2

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

请参阅此答案以获取一些示例代码：

google 文档 iframe - 更改填充

google docs iframe - change padding

iframe

google-docs

angularjs

Plunker