يؤدي التكبير في Iframe إلى التأثير على موضع المؤشر الخاطئ في تطبيق cordova iOS

Question

أنا أستخدم Cordova لتطوير نظام iOS.أستخدم iframe لفتح رابط خارجي في تطبيقي.حجم الصفحة الخارجي كبير ولكي يتناسب مع الشاشة أستخدم خاصية مقياس التحويل -webkit.كل شيء على ما يرام ويتناسب مع الشاشة.لكن المشكلة هي أنه عندما أقوم بتحديد إدخال نص، يبدأ مؤشر الإدخال (علامة الإقحام) في الوميض في مكان ما أسفل حقل النص.

---

يرجى الاطلاع على الرمز:

الفهرس.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>

نموذج.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 الطريقة في نفس الفئة ل UIWebView options .أي؛

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

فهذا يعني استبدال السطر أعلاه إلى؛

self.inAppBrowserViewController.webView.scalesPageToFit = YES;

UIWebView هو في الواقع خاصية scalesPageToFit الذي يناسب الصفحة مع عرض الجهاز مع الأخذ في الاعتبار نسبة العرض إلى الارتفاع.