it-swarm.com.de

iframe innerhalb der angle2-Komponente, Eigenschaft 'contentWindow' ist beim Typ 'HTMLElement' nicht vorhanden

Ich habe einen iframe in einer angle2-Komponente und ich versuche, den Inhalt des iframe durch Zugriff auf das contentWindow zu ändern.
.__ Der iframe sollte eine einfache Schaltfläche enthalten.

Mein 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();
    }
   }

Wenn ich den Code des Konstruktors kommentiere und die App starte, wird sie kompiliert und korrekt ausgeführt. Dann kommentiere ich unkommentiert und alles läuft perfekt (der Button ist im iframe vorhanden).

Wenn ich den Code dekommentiere, dann starte die App (npm start). Ich habe Kompilierungsfehler mit der Nachricht:

Die Eigenschaft 'contentWindow' ist beim Typ 'HTMLElement' nicht vorhanden

.

Ich habe auch versucht, den Code des Costructor in ngOnInit (), ngAfterContentInit () und ngAfterViewInit () zu setzen, aber der Fehler bleibt bestehen.

11
gabriela

Die Vorlage existiert noch nicht im DOM, wenn der Konstruktor ausgeführt wird

Stattdessen verwenden

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

benutze das:

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

Ich habe das Problem folgendermaßen gelöst:

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

Wenn der Inhalt des IFRAME von same Origin erstellt wird, würde ich vorschlagen, das IFRAME-Attribut srcDoc zu verwenden, um den Inhalt in IFRAME festzulegen und zu ändern.

@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...'
  }
}

Siehe diese PLUNKER DEMO

Dadurch bleiben die nativen HTML-Elemente mit Angular Universal kompatibel.

1
Yoraco Gonzales

Ich habe das Problem folgendermaßen gelöst:

 var ID = document.getElementById("Iframe");
 var Iframe = eval("(ID.contentWindow || ID.contentDocument)");
 Iframe.CallIframeFunction();
0
Deepak Sharma

Oder verwenden Sie das jetzt bekannte TypeScript-Workaround:

iframe['contentWindow']
0
SoEzPz