Plunker

Question

我已经创建了一个嵌入式iframe，发布了一个google doc。 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

未捕获的DOMException：使用origin阻止了一个帧 “http://localhost:8100”访问跨域框架。

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

我尝试用一些css应用于我可以达到的目标来对抗填充。例如：

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

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

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

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

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

Answer 1

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

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

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

<iframe>，<embed>和<object>

Plunker

设置embedded=true时，Google服务器会将.c1类添加到<body>

内容的<iframe>

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

如果你问我，那对谷歌来说就是毋庸置疑。我建议您在内容本身上设置填充并设置embedded=false。

Answer 2

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

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

谷歌文档iframe - 更改填充

2 个答案:

Plunker