缩放iframe会影响cordova iOS应用程序中错误的光标位置

Question

我正在使用Cordova进行ios开发。我使用iframe在我的应用中打开外部链接。外部页面大小很大，为了适应屏幕我使用-webkit-transform scale属性。一切都很好，它适合屏幕。但问题是，当我选择文本输入时，输入光标（插入符号）开始在文本字段下方的某处闪烁。

---

请参阅代码：

的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>

和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

这是我面临的一个老问题。我已经查看了我两年前的代码来解决这个问题，这是解决方案。

我没有使用 iframe 来打开外部链接，而是将其嵌入到另一个页面中，而是使用 inAppBrowser 这用于打开外部链接。

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

现在，'EnableViewPortScale = yes'选项可以。它在{strong> browserOptions.enableviewportscale 中将true设置为CDVInAppBrowser.m，{strong> openInInAppBrowser 方法用于{UIWebView 1}} options。即;

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

表示上面一行代替;

self.inAppBrowserViewController.webView.scalesPageToFit = YES;

UIWebView 实际上有一个属性 scalesPageToFit ，考虑到宽高比，该属性适合设备宽度的页面。