Question

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

iframe出现了，但是，当我尝试将CSS规则应用于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的原因，但是我确实怀疑可能是因为这个原因，尽管我不确定为什么会这样，或者我如何解决它。

Answer 1

如果您的CSS来自CSS模块，则不会将样式应用于嵌套组件。（这是CSS模块的重要功能。）

尝试在CSS前面为您的iframe添加/deep/（尽管已弃用/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

无法将CSS应用于iframe（代码本身）

1 个答案: