Zoom in Iframe con posizione del cursore errata nell'applicazione iOS cordova

Question

Utilizzo lo sviluppo di Cordova per ios. Uso un iframe per aprire un collegamento esterno nella mia app. La dimensione della pagina esterna è grande e per adattarsi allo schermo che sto usando -webkit-transform proprietà in scala. Tutto va bene e si adatta allo schermo. Ma il problema è che quando seleziono un input di testo, il cursore di input (caret) inizia a lampeggiare da qualche parte sotto il campo di testo.

---

Si prega di vedere il codice:

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> 

e JS è:

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 
} 

Answer 1

Questo era un vecchio problema che è stato affrontato anche da me. Ho esaminato il mio codice di due anni per la soluzione di questo problema ed ecco la soluzione.

Invece di usare il iframe per l'apertura del collegamento esterno, che sarebbe stato incorporato in un'altra pagina, avevo usato il inAppBrowser per questo per l'apertura di collegamento esterno.

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

Ora, che cosa 'EnableViewPortScale = yes' opzione fanno. Il suo impostare il browserOptions.enableviewportscale a true in CDVInAppBrowser.m che è stato utilizzato in openInInAppBrowser metodo nella stessa classe per UIWebViewoptions. vale a dire;

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

significa che la riga sopra è sostituita da;

self.inAppBrowserViewController.webView.scalesPageToFit = YES;

UIWebView è in realtà hanno una struttura scalesPageToFit che si adatta la pagina alla larghezza del dispositivo considerando il rapporto di aspetto.