Activer le pincement pour zoomer dans l'iframe - Ionic 2 AngularJS 2

Question

J'ai ajouté zooming="true" à l'intérieur de la balise mais lorsque la page est chargée, je ne peux pas zoomer pour augmenter ou diminuer la vue. J'ai également défini webkitallowfullscreen mozallowfullscreen allowfullscreen pour mettre la page à l'échelle afin de l'adapter à l'écran de l'appareil, mais rien n'a changé et la page est toujours coupée.

Pour expliquer un peu mieux ce concept, je prends pour exemple Android les applications natives. Maintenant, si vous voulez charger une page depuis le web, vous utilisez une WebView et le résultat est exactement comme l'utilisation d'un iframe sur Ionic . Mais sur Android, les choses deviennent plus simples en matière de personnalisation :

webview.getSettings().setBuiltInZoomControls(true);

pour activer la fonction "pincer pour zoomer", et

webview.getSettings().setUseWideViewPort(true);

pour adapter et mettre à l'échelle la page Web en fonction de la taille de l'écran (mobile). Maintenant, en utilisant Windows 10 il ne m'est pas possible de construire native iOS apps donc je dois compter sur cross-platform development .

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

J'espère que vous pourrez m'aider.

Modifier

J'ai ajouté document.getElementsByTagName('iframe').contentWindow.document.body.style = 'zoom:50%'; mais je reçois un Erreur de typographie :

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

Voici l'ensemble de mon .ts fichier :

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

Après avoir ajouté id="myframe" à l'intérieur de <iframe> J'ai également essayé avec la fonction ngAfterViewInit() mais toujours aucun changement.

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

Et sous cette forme aussi :

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

Answer 1

Vous devrez suivre le geste et appliquer le changement de zoom à l'iframe comme ceci document.getElementByTagName('iframe').contentWindow.document.body.style = 'zoom:50%';

Ici, le zoom est fixé à 50%, mais cela peut être ajouté dynamiquement en utilisant les valeurs de l'événement du geste.

Answer 2

Je pense qu'il n'est pas possible de le faire dans une IFrame car cela constituerait une faille de sécurité. Ce que vous faites essentiellement, c'est essayer d'accéder à une page web à partir de votre application mobile hybride (Ionic App dans votre cas). Il ne doit pas vous permettre d'exécuter javascript sur cette page web, la solution de contournement pour cela sera de désactiver la sécurité web sur ce navigateur ou dans votre cas webview (je ne suis pas sûr de savoir comment faire cela dans le mobile, mais c'est une personnalisation manuelle du navigateur, donc cela ne fonctionnera pas dans votre scénario).

plus d'explications sur ce post SecurityError : Blocage de l'accès d'un cadre d'origine à un cadre d'origine croisée.