Angular - 将自定义 css 文件注入 iframe答案

【问题标题】：Angular - Inject custom css file to an iframeAngular - 将自定义 css 文件注入 iframe
【发布时间】：2018-12-31 22:16:29
【问题描述】：

我正在尝试将 CSS 文件注入到需要更改样式的第三方 iframe。

我想用

ngOnInit() {
...

this.myIframe.nativeElement.document.head.appendChild('style.css')

}

但由于某种我无法理解的原因，它无法正常工作。

任何帮助将不胜感激。

干杯

【问题讨论】：

标签： css angular iframe

【解决方案1】：

如果您的 iframe 不是来自其他域，则此解决方法将有效。您将收到跨浏览器错误。模板

<iframe #myIframe></iframe>

组件

@ViewChild('myIframe') public myIframe;
..........
ngAfterViewInit() {
  const iframDoc = this.myIframe.nativeElement.contentWindow.document;
  .....
  iframDoc.head.appendChild('style.css');
}
.....

【讨论】：

【解决方案2】：

不可能像我想象的那样注入代码，所以当控制该页面的 SCSS 文件被编译时，我最终覆盖了 CSS。

在某些情况下，我不得不使用整个继承链来让字段按要求的方式运行。

感谢您的意见@SuhelKhan

【讨论】：