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.
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();
}
}
utilisez ceci:
let iframe = document.getElementById('iframe') as HTMLIFrameElement
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) {
...
}
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.