web-dev-qa-db-fra.com

iframe dans le composant angular2, la propriété 'contentWindow' n'existe pas sur le type 'HTMLElement'

J'ai un iframe dans un composant angular2 et j'essaie de modifier le contenu de l'iframe en accédant à la fenêtre contentWindow.
L’iframe devrait contenir un simple bouton.

Mon code:

    import { Component } from '@angular/core';
    @Component({
      moduleId: module.id,
      selector: 'component-iframe',
      template: '<iframe id="iframe"></iframe>'
    })
    export class ComponentIframe  {
      constructor() {
        let iframe = document.getElementById('iframe'); 
        let content = '<button id="button" class="button" >My button </button>';
        let doc =  iframe.contentDocument || iframe.contentWindow;
        doc.open();
        doc.write(content);
      doc.close();
    }
   }

Si je commente le code du constructeur et lance l'application, elle se compile et s'exécute correctement. Puis je dégage mon commentaire et tout fonctionne parfaitement (le bouton est présent dans l'iframe).

Si je décompt le code puis lance l'application (npm start) j'ai des bogues de compilation avec le message:

La propriété 'contentWindow' n'existe pas sur le type 'HTMLElement'

.

J'ai également essayé de remplacer le code du costructor dans ngOnInit (), ngAfterContentInit (), ngAfterViewInit () mais l'erreur persiste.

javascriptiframeangular
11
gabriela

Le modèle n'existe pas encore dans le DOM lorsque le constructeur est exécuté

Utilisez plutôt

import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
  moduleId: module.id,
  selector: 'component-iframe',
  template: '<iframe #iframe></iframe>'
})
export class ComponentIframe  {
  @ViewChild('iframe') iframe: ElementRef;

  ngAfterViewInit() {
    let content = '<button id="button" class="button" >My button </button>';
    let doc =  this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentWindow;
    doc.open();
    doc.write(content);
    doc.close();
  }
}
18
Günter Zöchbauer

utilisez ceci:

let iframe = document.getElementById('iframe') as HTMLIFrameElement
6
Eldos Narbay

J'ai résolu le problème de la manière suivante:

const element: HTMLIFrameElement = document.getElementById('iframe') as HTMLIFrameElement;
const iframe = element.contentWindow;
if (iframe !== null) {
  ...
}
1
Pablo

Si le contenu de IFRAME est créé par same Origin, il est conseillé d'utiliser l'attribut IFRAME srcDoc pour définir et modifier le contenu dans IFRAME.

@Component({
  selector: 'my-app',
  template: `
    <p><label for="text">Write content here...</label></p>
    <textarea 
        #text
        rows="10" 
        cols="47" 
        placeholder="Write some HTML content here..." 
        [(ngModel)]="srcDocContent"></textarea>

    <p>Preview HTML content in IFRAME</p>
    <iframe 
        sandbox="allow-same-Origin" 
        [attr.srcDoc]="srcDocContent"></iframe>
  `
})
export class App {

  srcDocContent:string

  constructor() {
    this.srcDocContent='Some <strong>HTML</strong> content here...'
  }
}

Voir ceci PLUNKER DEMO

Cela permettra aux éléments HTML natifs intacts de rester compatibles avec Angular Universal.

1
Yoraco Gonzales