无法将CSS应用于iframe(标记本身)?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (314)

我有一个内容编辑器,使用该编辑器我希望用户能够保存到外部域的链接并将其显示为iframe。

iframe显示,但是当我尝试将CS​​S规则应用于iframe(而不是iframe中的内容,标记本身)时,无论我做什么,它都不起作用,并且规则甚至没有显示在开发者控制台。我在同一张表中有更多规则可以正常工作。

目前我有以下css:

iframe, .ql-video {
  height: 500px !important;
  width: 300px !important;
}

这是我正在测试的IFRAME:

<iframe class="ql-video" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/GKqEoSiAi90?showinfo=0" data-ss1531946992="1" data-ss1531947568="1"></iframe>

但是CSS根本不影响它。它根本没有出现。

如果我将规则添加到element.style它可以按我的意愿工作,但是当加载iframe时我需要有规则。遗憾的是,我不能将其设置为内联样式,因为iframe(以及其余内容)是作为字符串从数据库中检索的。

我是这样检索内容的(iframe是其中的一部分):

this.contentService.getSpecificArticle(this.route.snapshot.queryParams["newsid"]).subscribe( news => {
  document.getElementById('main_content').innerHTML = (news as any).content;
  ...
});

我这样做是因为编辑器将内容保存为纯HTML。

所以我不知道为什么我不能用这种方式设置iframe标签的样式?

我也尝试插入内容,然后,角度消除iframe以及属性绑定,但内容显示为字符串。这就是为什么我使用.innerHTML,但我怀疑它可能是因为这个,虽然我不确定为什么会是这种情况,或者我如何解决它。

提问于
用户回答回答于

如果您的CSS来自CSS模块,它将不会将样式应用于嵌套组件。(这是CSS模块的一个重要特性)。

尝试/deep/在CSS前面添加iframe(虽然/deep/已弃用,但您现在应该使用它::ng-deep

/deep/ .ql-video {
  height: 500px !important;
  width: 300px !important;
}

(此外,您不应该使用/deep/,您应该为该特定组件制作CSS并将其应用于那里。)

以下是有关Angular组件样式和“深度”的一些信息:https//angular.io/guide/component-styles#deprecated-deep--and-ng-deep

扫码关注云+社区

领取腾讯云代金券