Angular - Inject custom css file to an iframe

问题

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

回答1:

This workaround will work if your Iframe is not from a different domain. You will get a cross-browser error. Template

<iframe #myIframe></iframe>

Component

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

回答2:

It isn't possible to inject code like I thought it was so I ended up overriding the CSS when the SCSS file that controlled that page was compiled.

In some occasions, I had to use the whole inheritance chain to get a field to behave the way it was required.

Thank you for your input @SuhelKhan

来源：https://stackoverflow.com/questions/51496114/angular-inject-custom-css-file-to-an-iframe