Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 srcdoc polyfill doesn't work

I'm using Angular 2 with angular-cli and I want to add srcdoc polyfill to support Microsoft Edge. So:

I added to package.json https://github.com/jugglinmike/srcdoc-polyfill

I imported import 'srcdoc-polyfill/srcdoc-polyfill.min'; in polyfills.ts.

I used it like:

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

By chance, if you ask me for IframeAutoHeight directive, here is the 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 Edge 35 is ignoring srcdoc property, any ideas about what's the problem?

I also accept workarounds.

like image 624
Serginho Avatar asked Feb 15 '17 18:02

Serginho


1 Answers

For some reason attribute does not work:

<iframe #frame></iframe>

import * as srcDoc from 'srcdoc-polyfill';

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

srcDoc.set(this.iframe.nativeElement, "<html><body>test</body></html>");
like image 174
kemsky Avatar answered Oct 22 '22 12:10

kemsky