Как найти дочерние узлы в iframe с angular и стилизовать их?

Question

Мне нужен способ найти дочерние узлы внутри iframe с помощью angular (мне нужен элемент html). Мой текущий подход выглядит следующим образом:

Я поместил ссылочную переменную в свой iframe (#privacyPolicy)

<iframe
    name="privacy-policy" 
    id="privacy-policy"
    [src]="myURL"
    #privacyPolicy>
</iframe>

В моем компоненте я использовал @ViewChild чтобы получить доступ к моему iframe

export class MyClass implements AfterViewInit {
  @ViewChild('privacyPolicy', { static: false }) privacyPolicy: ElementRef<any>;

  ngAfterViewInit() {
    const hostElement = this.privacyPolicy.nativeElement;
    console.log(hostElement.children);
    console.log(hostElement.parentNode);
    console.log('iframe', this.privacyPolicy.nativeElement.style.border = '1px solid black');
  }
}

Третий console.log() внутри жизненного цикла ngAfterViewInit() работает и стилизует элемент iframe. Но я хочу стилизовать html -элемент, вложенный в элемент iframe.

Я уже пробовал вот так (безуспешно):

hostElement.children[0].style.border = "1px solid black";

Есть ли чистый и простой Angular способ сделать это?

Answer 1

Вам необходимо получить доступ к contentDocument и после того, как вы получите свой контент HTML из Iframe. В вашем случае:

const hostElement = this.privacyPolicy.nativeElement;
hostElement.contentDocument.body.style.border = '1px solid black';

и если вы хотите добавить новый стиль в свой iframe

  const hostElement = this.privacyPolicy.nativeElement;
  const iframe = hostElement.contentDocument;
  const style = document.createElement('style');
  let newStyle = 'body {background-color: red;}';
  style.innerText = newStyle;
  iframe.head.appendChild(style);