谷歌文档iframe - 更改填充

Question

谷歌文档iframe - 更改填充

NoI*_*his 8 iframe google-docs angularjs

我有一个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
        });
    }
}}]);

Run Code Online (Sandbox Code Playgroud)

适用于:

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

Run Code Online (Sandbox Code Playgroud)

但正如预期的那样,iframe.querySelector返回null和iframe.contentWindow.document结果

未捕获的DOMException:阻止具有原始" http:// localhost:8100 "的帧访问跨源帧.

我已经看过一个解决方法,但我觉得它有点过分(例如:与消息安全交叉通信).

我尝试用一些css应用于我可以达到的范围来对抗填充.例如:

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

Run Code Online (Sandbox Code Playgroud)

CSS应用到body的iframe似乎被简单地忽略.

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

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

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

Answer 1

zer*_*0ne 5

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

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

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

<iframe>,<embed>和<object>

Plunker

当您设置embedded=true谷歌服务器将添加一个名为类.c1到<body>里面的内容<iframe>

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

Run Code Online (Sandbox Code Playgroud)

如果你问我,这对谷歌来说简直是鲁莽.我建议你在内容本身设置填充并设置embedded=false.

归档时间：	8 年，6 月前
查看次数：	1255 次
最近记录：	6 年，11 月前