Question

I'm trying to inject a CSS file to a third party iframe that I need to change the styling.

I thought of using

ngOnInit() {
...

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

}

but it is not working for some reason beyond my grasp.

Any help will be appreciated.

Cheers

Answer 1

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

<iframe #myIframe></iframe>

组件

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

Answer 2

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

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

感谢您输入@SuhelKhan

Angular - Inject custom css file to an iframe

2 个答案: