2017-02-15 20 views
7

Używam Angular 2 z kątowym-cli i chcę dodać srcdoc polyfill do obsługi Microsoft Edge. Więc:Polyfill Angril 2 srcdoc nie działa

dodałem do package.json https://github.com/jugglinmike/srcdoc-polyfill

I importowane import 'srcdoc-polyfill/srcdoc-polyfill.min'; w polyfills.ts.

użyłem go lubię:

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

Przez przypadek, jeśli chodzi o mnie do dyrektywy IframeAutoHeight, oto kod:

@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 Edge 35 ignoruje nieruchomość srcdoc, jakieś pomysły na temat jaki jest problem?

Akceptuję również obejścia.

Odpowiedz

4

Z jakiegoś powodu atrybut nie działa:

<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

To jest dobra odpowiedź. Zauważ, że technicznie _nie_popraszanie go w tym przykładzie, ale raczej _ponyfilling_ it (czasami nienawidzę terminu sztuki), więc to podejście byłoby dobre w kodzie biblioteki, ale importowanie go jako 'import 'srcdoc-polyfill'' byłoby ładniejsze w kodzie aplikacji, ponieważ jest to rodzaj punktu na polyfills. Przy okazji, przegłosowano! –

+0

Sądzę, że polyfills tylko te elementy iframe, które istnieją na stronie po wykonaniu polyfill. – kemsky

+0

Nie to nic nie polyfilluje, co jest w porządku. Importujesz zachowanie, które byłoby polyfilled i nazywając je funkcją. –

Powiązane problemy