Lo zoom in Iframe influisce sulla posizione errata del cursore nell'applicazione iOS cordova

Question

Sto usando Cordova per lo sviluppo iOS.Utilizzo un iframe per aprire un collegamento esterno nella mia app.La dimensione della pagina esterna è grande e per adattarla allo schermo utilizzo la proprietà -webkit-transform scale.Va tutto bene e si adatta allo schermo.Ma il problema è che quando seleziono un input di testo, il cursore di input (accento circonflesso) inizia a lampeggiare da qualche parte sotto il campo di testo.

---

Si prega di consultare il codice:

indice.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>

modulo.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 ho affrontato anche io.Ho esaminato il mio codice vecchio di due anni per la soluzione di questo problema ed ecco la soluzione.

Invece di usare il iframe per aprire il link esterno, che sarebbe stato incorporato in un'altra pagina, avevo utilizzato il file inAppBrowser per questo per aprire il collegamento esterno.

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

Ora, cosa 'AbilitaViewPortScale=sì' opzione fare.È impostato il browserOptions.enableviewportscale A true In CDVInAppBrowser.m che è stato utilizzato in openInInAppBrowser metodo nella stessa classe per UIWebView options .cioè;

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

significa che la riga sopra viene sostituita con;

self.inAppBrowserViewController.webView.scalesPageToFit = YES;

UIWebView ha effettivamente una proprietà scalesPageToFit che adatta la pagina alla larghezza del dispositivo considerando le proporzioni.