Enable pinch to zoom inside iframe - Ionic 2 AngularJS 2

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.

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);     } 

1 Answers

Answers 1

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.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati