Hacer zoom en Iframe provoca la posición incorrecta del cursor en la aplicación Cordova iOS
-
26-12-2019 - |
Pregunta
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 de escala -webkit-transform.Todo está bien y encaja en la pantalla.Pero el problema es que cuando selecciono una entrada de texto, el cursor de entrada (cuadro) comienza a parpadear en algún lugar debajo del campo de texto.
Por favor vea el código:
índice.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>
formulario.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 i.e; 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
}
Solución
Este era un viejo problema al que también me enfrentaba yo.He buscado en mi código de hace dos años la solución a este problema y aquí está la solución.
En lugar de utilizar el iframe
para abrir el enlace externo, que estaría incrustado en otra página, había usado el inAppBrowser
para esto para abrir un enlace externo.
window.open( encodeURI('externalPage.html') , '_blank', 'location=no','EnableViewPortScale=yes');
Ahora que 'EnableViewPortScale=sí' opción hacer.Esta establecido el browserOptions.enableviewportscale
a true
en CDVInAppBrowser.m
que fue usado en openInInAppBrowser
método en la misma clase para UIWebView
options
.es decir;
self.inAppBrowserViewController.webView.scalesPageToFit = browserOptions.enableviewportscale;
significa que la línea anterior se reemplaza por;
self.inAppBrowserViewController.webView.scalesPageToFit = YES;
UIWebView
en realidad tiene una propiedad scalesPageToFit
que ajusta la página al ancho del dispositivo considerando la relación de aspecto.