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.
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>");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With