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%";
}

Do you think this behaviour is only ionic or is because of the iframe itself, can you create a simpler app to see what is the source of the problem. Also if you share it, it can be more helpful for finding a solution. — Burak Tokak, Jan 31 '17 at 05:33
I don't know if it's either a limitation of Ionic or a limitation of iframe itself. I've also tried with other urls but the page gets cut anyway — Pier, Jan 31 '17 at 13:40

score 7 · Answer 1 · answered Feb 05 '17 at 14:39

7

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.

answered Feb 05 '17 at 14:39

Vinit Sarvade

737
6
13

I edited my question so you'll see better what I did – Pier Feb 08 '17 at 16:45
Please, could you help me? Nobody else does – Pier Feb 18 '17 at 22:18

score 7 · Accepted Answer · edited May 23 '17 at 12:18

7

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

edited May 23 '17 at 12:18

Community

1
1

answered Feb 20 '17 at 09:53

Ankit

395
1
9

So in few words, you are saying that I can't do anything to adjust the view or at least zoom out little bit, right? That's a problem for me because my customer wants to load its webpage where he has sponsored advertisement and this leads to bad ratings because the user has to swipe the screen back and forth in order to read every line – Pier Feb 20 '17 at 17:11
yes. but why don't you create a link to be open in default browser. – Ankit Feb 20 '17 at 17:17
Because I already did this in the android version of the app I created with Android Studio and it received bad ratings as the user was bothered to open the browser in order to load the news, wondering what the purpose of the app was if he had to load the browser everytime. They could directly go on their site without using the app. When on Android I managed to load the news within the app, nobody complained anymore – Pier Feb 20 '17 at 17:29
This is the least you could do about it i guess or ask your customer to make a better webpage that actually is responsive and user friendly. – Ankit Feb 20 '17 at 17:44
Well, thank you very much for your answer. I suppose I'd overcome this issue if I used XCode for the iOS version. Hope it'll get nice reviews anyway, I'll explain all this to my customer and maybe in future make proper changes to the site as well. Thanks again ;) – Pier Feb 20 '17 at 17:59

Enable pinch to zoom inside iframe - Ionic 2 AngularJS 2

2 Answers2