Enable pinch to zoom inside iframe - Ionic 2 AngularJS 2

Question

I added zooming="true" inside the tag but when the page is loaded I cannot zoom to increase or decrease the view. I've also set webkitallowfullscreen mozallowfullscreen allowfullscreen to scale the page in order to fit the device screen but nothing changed and the page is still cut.

To explain this concept a little better I take for example Android native apps. Now, if you want to load a page from the web you use a WebView and the result is exactly like using an iframe on Ionic. But on android things become simpler regarding customization:

webview.getSettings().setBuiltInZoomControls(true);

to enable pinch-to-zoom, and

webview.getSettings().setUseWideViewPort(true);

to fit and scale the web page depending on the size of the (mobile) screen. Now, using Windows 10 it's not possible for me to build native iOS apps so I have to rely on cross-platform development.

Here's my detail-page: html:

<ion-content>
  <iframe sandbox class="link" frameborder="0" [src]="webPage()" zooming="true" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</ion-content>

scss:

detail-page {

    .scroll-content{
        padding: 0px ;
    }

    ::-webkit-scrollbar,
    *::-webkit-scrollbar {
        display: none;
    }

    iframe.link {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
    }

}

ts:

webPage() {
        return this.sanitizer.bypassSecurityTrustResourceUrl(this.entry.getElementsByTagName('link')[0].textContent);
    }

Hope you can help me.

Edit

I added document.getElementsByTagName('iframe').contentWindow.document.body.style = 'zoom:50%'; but I'm getting a Typescript error:

Typescript Error
Property 'contentWindow' does not exist on type 'NodeListOf<HTMLIFrameElement>'.

Here's my whole .ts file:

export class DetailPage {

    entry:any = [];

    constructor(private sanitizer: DomSanitizer, public nav: NavController, navParams:NavParams) {
        console.log('run');
        this.nav = nav;
        this.entry = navParams.get('selectedEntry');
        console.log('My entry is: "'+ this.entry.getElementsByTagName('title')[0].textContent + '"');

        document.getElementsByTagName('iframe').contentWindow.document.body.style = 'zoom:50%';
    }

    webPage() {
        return this.sanitizer.bypassSecurityTrustResourceUrl(this.entry.getElementsByTagName('link')[0].textContent);
    }
}

Edit 2

After adding id="myframe" inside <iframe> I've also tried with the function ngAfterViewInit() but still no changes there.

ngAfterViewInit() {
  var x = document.getElementById("myframe");
  var y = (<HTMLIFrameElement> x).contentWindow.document;
  y.body.style.zoom = "50%";
}

And in this form too:

ngAfterViewInit() {
    var iframe:HTMLIFrameElement = <HTMLIFrameElement>document.getElementById('myframe');
    var iWindow = (<HTMLIFrameElement>iframe).contentWindow.document;
    iWindow.body.style.zoom = "50%";
}

Answer 1

I think it is not possible to do in a IFrame as that will be a security flaw. what you are basically doing is trying to access a webpage from your mobile hybrid app (Ionic App in your case). it must not allow you to run javascript on that webpage, workaround for it will be by disabling web security on that browser or in your case webview (not sure how to do that in mobile but that is manual browser customization so will not work in your scenario).

more explanation on this post SecurityError: Blocked a frame with origin from accessing a cross-origin frame

Answer 2

You will need to track the gesture and apply the change of zoom to the iframe like this document.getElementByTagName('iframe').contentWindow.document.body.style = 'zoom:50%';

Here the zoom is set to 50%, but this can be added dynamically using the gesture event values.