2017-02-15 1 views
7

J'utilise Angular 2 avec angulaire-cli et je veux ajouter sfcdoc polyfill pour soutenir Microsoft Edge. Alors:Polyfill angulaire 2 srcdoc ne fonctionne pas

J'ajouté à package.json https://github.com/jugglinmike/srcdoc-polyfill

Je import 'srcdoc-polyfill/srcdoc-polyfill.min'; en polyfills.ts importé.

Je l'ai utilisé comme:

<iframe class="ticket-frame" [srcdoc]="ticket.html | htmlSafe" 
        tlIframeAutoHeight> 
</iframe> 

Par chance, si vous me demandez directive IframeAutoHeight, voici le code:

@Directive({ 

    selector: '[tlIframeAutoHeight]' 
}) 
export class IframeAutoHeightDirective { 

    constructor(element: ElementRef, renderer: Renderer) { 
    renderer.listen(element.nativeElement, 'load',() => { 
     renderer.setElementStyle(
     element.nativeElement, 
     'height', 
     element.nativeElement.contentWindow.document.body.clientHeight + 'px' 
    ); 
    }); 
    } 
} 

Microsoft bord 35 ignore la propriété de srcdoc, des idées sur quel est le problème?

J'accepte également les solutions de contournement.

Répondre

4

Pour un attribut raison ne fonctionne pas:

<iframe #frame></iframe> 

import * as srcDoc from 'srcdoc-polyfill'; 

@ViewChild('frame') 
public iframe:ElementRef; 

srcDoc.set(this.iframe.nativeElement, "<html><body>test</body></html>"); 
+0

Ceci est une bonne réponse. Notez que vous ne faites pas de polyfilling dans cet exemple, mais plutôt _ponyfilling_ (parfois je déteste le terme d'art), donc cette approche serait bonne dans le code de la bibliothèque, mais l'importer comme 'srcdoc-polyfill 'serait plus agréable dans le code de l'application, car c'est un peu le point de polyfills. Btw, upvoted! –

+0

Je suppose qu'il ne remplit que les iframes qui existent sur la page lorsque polyfill est exécuté. – kemsky

+0

Non, il ne polyfill quoi que ce soit, ce qui est OK. Vous importez le comportement qui sera polyfilled et l'appelez en tant que fonction. –