html - component - iframe src angular 4

Habilitar pellizcar para aumentar el zoom dentro del iframe-Ionic 2 AngularJS 2

Question

zooming="true" dentro de la etiqueta, pero cuando la página está cargada, no puedo hacer zoom para aumentar o disminuir la vista. También configuré webkitallowfullscreen mozallowfullscreen allowfullscreen para escalar la página para que se ajuste a la pantalla del dispositivo, pero nada cambió y la página sigue cortada.

Para explicar este concepto un poco mejor tomo, por ejemplo, Android nativas de Android . Ahora, si quiere cargar una página desde la web, usa una WebView y el resultado es exactamente como usar un iframe en Ionic . Pero en Android las cosas se vuelven más simples con respecto a la personalización:

webview.getSettings().setBuiltInZoomControls(true);

para permitir pellizcar para hacer zoom, y

webview.getSettings().setUseWideViewPort(true);

para ajustar y escalar la página web según el tamaño de la pantalla (móvil). Ahora, al usar Windows 10 , no me es posible crear native iOS apps así que tengo que confiar en el cross-platform development .

Aquí está mi 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);
}

Espero que puedas ayudarme.

Editar

document.getElementsByTagName(''iframe'').contentWindow.document.body.style = ''zoom:50%''; pero obtengo un error de TypeScript :

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

Aquí está mi archivo .ts completo:

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

Editar 2

Después de agregar id="myframe" dentro de <iframe> , también he intentado con la función ngAfterViewInit() pero todavía no hay cambios allí.

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

Y de esta forma también:

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

Answer 1

Creo que no es posible hacerlo en un IFrame, ya que será un fallo de seguridad. lo que básicamente estás haciendo es intentar acceder a una página web desde tu aplicación híbrida móvil (la aplicación Ionic en tu caso). no debe permitirle ejecutar javascript en esa página web, la solución será deshabilitar la seguridad web en ese navegador o en su vista web de caso (no estoy seguro de cómo hacerlo en el dispositivo móvil, pero esa es la personalización manual del navegador, por lo que no funcionará en su guión).

más explicación sobre esta publicación SecurityError: Blocked a frame with origin from access to a cross-origin frame

Answer 2

Necesitará seguir el gesto y aplicar el cambio de zoom al iframe como este document.getElementByTagName(''iframe'').contentWindow.document.body.style = ''zoom:50%'';

Aquí, el zoom se establece en 50%, pero puede agregarse dinámicamente utilizando los valores de eventos de gestos.