Cordova iOS 애플리케이션에서 잘못된 커서 위치에 영향을 미치는 Iframe 확대
-
26-12-2019 - |
문제
iOS 개발에는 Cordova를 사용하고 있습니다.내 앱에서 외부 링크를 열려면 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
}
해결책
이것은 나 역시 직면했던 오래된 문제였다.나는 이 문제를 해결하기 위해 2년 된 코드를 조사해 보았는데 여기에 해결책이 있습니다.
대신에 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
종횡비를 고려하여 장치 너비에 페이지를 맞추는 것입니다.