放大 Iframe 会导致 cordova iOS 应用程序中的光标位置错误
-
26-12-2019 - |
题
我正在使用 Cordova 进行 ios 开发。我使用 iframe 在我的应用程序中打开外部链接。外部页面尺寸很大,为了适应屏幕,我使用 -webkit-transform scale 属性。一切都很好并且适合屏幕。但问题是,当我选择文本输入时,输入光标(插入符号)开始在文本字段下方的某处闪烁。
请看代码:
索引.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
}
解决方案
这是我也面临的一个老问题。我研究了我两年前的代码来解决这个问题,这是解决方案。
而不是使用 iframe
为了打开外部链接,它将嵌入到另一个页面中,我使用了 inAppBrowser
为此打开外部链接。
window.open( encodeURI('externalPage.html') , '_blank', 'location=no','EnableViewPortScale=yes');
怎么办 '启用ViewPortScale=是' 选项做。其设置了 browserOptions.enableviewportscale
到 true
在 CDVInAppBrowser.m
被用在 openInInAppBrowser
同一类中的方法 UIWebView
options
。IE;
self.inAppBrowserViewController.webView.scalesPageToFit = browserOptions.enableviewportscale;
这意味着上面的行被替换为;
self.inAppBrowserViewController.webView.scalesPageToFit = YES;
UIWebView
实际上是有财产的 scalesPageToFit
考虑到宽高比,使页面适合设备宽度。
不隶属于 StackOverflow