作者:安徒生童话13 | 来源:互联网 | 2023-02-01 13:32
我有一个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.querySelector
返回null
和iframe.contentWindow.document
结果
未捕获的DOMException:阻止具有原始" http:// localhost:8100 "的帧访问跨源帧.
我已经看过一个解决方法,但我觉得它有点过分(例如:与消息安全交叉通信).
我尝试用一些css应用于我可以达到的范围来对抗填充.例如:
iframe {
padding: 0px !important;
margin-left: -50px;
margin-right: 50px;
}
CSS应用到body
的iframe
似乎被简单地忽略.
曾几何时,有一些便利属性,例如marginwidth
.也试过了.我也想知道谷歌是否不提供一些"糖",但谷歌搜索并没有帮助.
注意:它确实不一定是iframe
,但我需要在应用程序中以可读的方式显示格式化的gdoc; 为此,我需要减少填充.
添加一个plunker:https://plnkr.co/edit/XIkgPe7ecLyFfhq1Q3Sv ? p = preview
1> zer00ne..:
将网址的最后一部分更改true
为false
.
https://docs.google.com/document/d/1s2nOQZ39dKD-hsmox5twmmKKkuXzOopT1eXFbMh5DeE/pub?embedded=false
该演示包括使用所有嵌入元素:
,
和
Plunker
当您设置embedded=true
谷歌服务器将添加一个名为类.c1
到
里面的内容
.c1 {
background-color: rgb(255, 255, 255);
max-width: 468pt;
padding: 72pt 72pt 72pt 72pt;
}
如果你问我,这对谷歌来说简直是鲁莽.我建议你在内容本身设置填充并设置embedded=false
.