Angular - Inject custom css file to an iframe

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

Suhel · Accepted Answer · 2018-07-24 10:57:08Z

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');
}
.....

answered Jul 24, 2018 at 10:57

Suhel

9679 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mr Teal · Accepted Answer · 2018-08-02 15:09:48Z

0

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

answered Aug 2, 2018 at 15:09

Mr Teal

3421 gold badge4 silver badges14 bronze badges

Collectives™ on Stack Overflow

Angular - Inject custom css file to an iframe

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related