Масштабирование в Iframe, влияющее на неправильную позицию курсора в приложении кордовы iOS

Question

Я использую Cordova для разработки ios. Я использую iframe для открытия внешней ссылки в моем приложении. Размер внешней страницы большой и для того, чтобы вписаться в экран, я использую свойство масштаба -webkit-transform. Все в порядке, и он вписывается в экран. Но проблема в том, что когда я выбираю текстовый ввод, курсор ввода (карет) начинает мигать где-то ниже текстового поля.

---

Пожалуйста, смотрите код:

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 = да' делать вариант. Его установить browserOptions.enableviewportscale к true в CDVInAppBrowser.m, который был использован в openInInAppBrowser метода в одном классе для UIWebViewoptions. то есть;

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

это означает, что указанная выше линия заменяется на;

self.inAppBrowserViewController.webView.scalesPageToFit = YES;

UIWebView на самом деле имеют свойство scalesPageToFit, который подходит страницу по ширине устройства с учетом соотношения сторон.