Hacer zoom en Iframe efectuando una position incorrecta del cursor en la aplicación Cordova iOS

Estoy usando Cordova para el desarrollo de ios. Utilizo un iframe para abrir un enlace externo en mi aplicación. El tamaño de la página externa es grande y, para que quepa en la pantalla, estoy usando la propiedad scale -webkit-transform. Todo está bien y cabe en la pantalla. Pero el problema es que cuando selecciono una input de text, el cursor de input (cursor) comienza a parpadear en alguna parte debajo del campo de text.

Imagen1


Por favor vea el código:

index.html:

<div data-role="page" id="personDetailPage"> <div data-role="header" class="header" > <div class="logo" id="mainScreenLogo"> <img src="" id="headerLogoImg" /> </div> <h1 id="personDetailTitle"class="tittle">Person Detail</h1> <a href="#main" class="ui-btn-right headerHomeIcon" data-transition="slide" onclick="formHomeButtonClick();"> <img src="homeIcon.png" class="headerHomeImg" /> </a> </div> <div id="iFrameDiv" scrolling="no"> <iframe id="formframe" width="280" height="150" src="form.html" onLoad='fixiFrame();' frameborder="0" ></iframe> </div> </div> 

form.html:

 <div data-role="page" id="personRegistration" scrolling="no"><br> Please Enter the Person Details <form id="registrationForm" method="POST" action="https://abe.com/Registration.aspx" onsubmit="return checkform();" > <div data-role="fieldcontain" class="ui-hide-label"> <input type="text" name="name" id="name" value="" placeholder="Name" /> </div> <div data-role="fieldcontain" class="ui-hide-label"> <input type="text" name="email" id="email" value="" placeholder="Email" /> </div> <a href="" id="my-custom-button-registration" data-role="button" data-transition="fade" onclick="return checkform();">Continue</a> </form> </div> 

y JS es:

 function fixiFrame() { // set the size of IFrame to the device screen fit $("#formframe").width( viewport.width ); $("#formframe").height( viewport.height -35- deviceVarient ); } function resizeIframe(){ //zoom the person registration Iframe upto screen fit it will be called when device ready var xaix = viewport.width /widthFactor; // widthFactor is the actual page sixe of external page ie; abc.com/Registration.aspx var yaix = (viewport.height-35- $(".logo").height() ) /heightFactor; $('#formframe').css('-webkit-transform', 'scale('+xaix+','+yaix+')'); $('#formframe').css('-webkit-transform-origin', '0 0'); //alert('resizeIframe(): xaix = '+xaix+' yaix = '+yaix+' $(.logo).height() = '+$(".logo").height()); //for testing & debugging } 

Este fue un viejo problema al que también me enfrenté. He examinado mi código de dos años para la solución de este problema y aquí está la solución.

En lugar de utilizar el iframe para abrir el enlace externo, eso estaría embedded en otra página, había usado el inAppBrowser para abrir el enlace externo.

window.open( encodeURI('externalPage.html') , '_blank', 'location=no','EnableViewPortScale=yes');

Ahora, qué hace la opción 'EnableViewPortScale = yes' . Establece el browserOptions.enableviewportscale en true en CDVInAppBrowser.m que se usó en el método openInInAppBrowser en la misma class para UIWebView options UIWebView . es decir;

 self.inAppBrowserViewController.webView.scalesPageToFit = browserOptions.enableviewportscale; 

significa que la línea anterior se reemplaza a;

self.inAppBrowserViewController.webView.scalesPageToFit = YES;

UIWebView realidad tiene una propiedad scalesPageToFit que se ajusta a la página al ancho del dispositivo considerando la relación de aspecto.