Zoom sur Iframe affectant la mauvaise position du curseur dans l'application iOS Cordova

Question

J'utilise Cordova pour le développement iOS.J'utilise une iframe pour ouvrir un lien externe dans mon application.La taille de la page externe est grande et afin de s'adapter à l'écran, j'utilise la propriété -webkit-transform scale.Tout va bien et ça rentre dans l'écran.Mais le problème est que lorsque je sélectionne une saisie de texte, le curseur de saisie (caret) commence à clignoter quelque part en dessous du champ de texte.

---

Veuillez consulter le code :

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>

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

et JS est :

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

C’était un vieux problème auquel j’étais également confronté.J'ai examiné mon code vieux de deux ans pour trouver la solution à ce problème et voici la solution.

Au lieu d'utiliser le iframe pour ouvrir le lien externe, qui serait intégré dans une autre page, j'avais utilisé le inAppBrowser pour cela pour ouvrir un lien externe.

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

Maintenant quoi 'EnableViewPortScale=oui' option faire.C'est réglé le browserOptions.enableviewportscale à true dans CDVInAppBrowser.m qui a été utilisé dans openInInAppBrowser méthode dans la même classe pour UIWebView options .c'est à dire;

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

cela signifie que la ligne ci-dessus est remplacée par ;

self.inAppBrowserViewController.webView.scalesPageToFit = YES;

UIWebView c'est en fait avoir une propriété scalesPageToFit qui adapte la page à la largeur de l'appareil en tenant compte du rapport hauteur/largeur.