Zoomen in Iframe bewirkt die falsche Cursorposition in der Cordova iOS-Anwendung

Question

Ich verwende Cordova für die iOS-Entwicklung.Ich benutze einen Iframe, um einen externen Link in meiner App zu öffnen.Die externe Seitengröße ist groß und um in den Bildschirm zu passen, verwende ich die Eigenschaft -webkit-transform scale .Alles ist in Ordnung und es passt in den Bildschirm.Das Problem ist jedoch, dass beim Auswählen einer Texteingabe der Eingabecursor (Caret) irgendwo unter dem Textfeld zu blinken beginnt.

---

Bitte beachten Sie den 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>

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>

und JS ist:

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

Dies war ein altes Problem, mit dem auch ich konfrontiert war.Ich habe in meinem zwei Jahre alten Code nach der Lösung dieses Problems gesucht und hier ist die Lösung.

Anstatt das zu verwenden iframe zum Öffnen des externen Links, der in eine andere Seite eingebettet wäre, hatte ich den verwendet inAppBrowser dafür zum Öffnen eines externen Links.

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

Nun, was 'EnableViewPortScale = ja' option tun.Sein Set das browserOptions.enableviewportscale zu true in CDVInAppBrowser.m das wurde verwendet in openInInAppBrowser methode in derselben Klasse für UIWebView options .z.b;

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

es bedeutet, dass die obige Zeile ersetzt wird durch;

self.inAppBrowserViewController.webView.scalesPageToFit = YES;

UIWebView ist eigentlich eine Eigenschaft haben scalesPageToFit das passt die Seite unter Berücksichtigung des Seitenverhältnisses an die Gerätebreite an.