使用cordova inappbrowser 和ios 11 和iPhone x 的状态栏问题

wal*_*287 5 cordova inappbrowser cordova-plugins ios11 iphone-x

我有一个cordova 应用程序,我正在尝试更新它以与新的iPhone x 一起使用,但我在使用inappbrowser 打开外部页面时遇到了问题。我正在使用最新的 xcode iPhone X 模拟器。如果我将目标更改为“_self”,它可以正常工作,但是我没有依赖的 loadstop 事件。

注意白色和红色页面之间的灰色空间。附加的视频更好地解释了它https://www.dropbox.com/s/fnsjz71dssqcr56/bug.mov?dl=0在此处输入图片说明

封面图片和其他一切看起来都很棒。

这是我的科尔多瓦配置

    <preference name="Fullscreen" value="True" />
<preference name="phonegap-version" value="cli-7.0.1" />
<preference name="KeepRunning" value="True" />
<preference name="ShowTitle" value="False" />
<preference name="InAppBrowserStorageEnabled" value="True" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#ffffff" />
<preference name="StatusBarStyle" value="black-translucent" />
<preference name="deployment-target" value="10" />
<preference name="AutoHideSplashScreen" value="true" />
<preference name="SplashScreenDelay" value="2000" />
<preference name="AllowBackForwardNavigationGestures" value="false" />
<feature name="CDVWKWebViewEngine">
    <param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<feature name="StatusBar">
    <param name="ios-package" onload="true" value="CDVStatusBar" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
<plugin name="cordova-plugin-device" spec="1.1.7" />
<plugin name="phonegap-plugin-push" spec="2.0.0" />
<plugin name="cordova-plugin-splashscreen" spec="4.1.0" />
<plugin name="cordova-plugin-whitelist" spec="~1.3.3" />
<plugin name="cordova-plugin-touch-id" spec="~3.2.0" />
<plugin name="cordova-plugin-statusbar" spec="2.3.0" />
<plugin name="cordova-plugin-wkwebview-engine" spec="~1.1.4" />
<plugin name="cordova-plugin-inappbrowser-wkwebview" spec="^1.0.4" />
<engine name="ios" spec="~4.5.3" />
Run Code Online (Sandbox Code Playgroud)

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Security-Policy">
    <meta name="viewport" content="viewport-fit=cover", initial-scale=1, width=device-width">
    <link href="content/css/font-awesome.css" rel="stylesheet" />
    <title>Wealth Access</title>   
</head>
<body>    
    <!-- Scripts -->
    <script src="cordova.js"></script>
    <script src="scripts/jquery/jquery-1.9.1.min.js"></script>
    <script src="scripts/index.js"></script>
    <script type="text/javascript" src="js/TouchID.js"></script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

javascript

    <preference name="Fullscreen" value="True" />
<preference name="phonegap-version" value="cli-7.0.1" />
<preference name="KeepRunning" value="True" />
<preference name="ShowTitle" value="False" />
<preference name="InAppBrowserStorageEnabled" value="True" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#ffffff" />
<preference name="StatusBarStyle" value="black-translucent" />
<preference name="deployment-target" value="10" />
<preference name="AutoHideSplashScreen" value="true" />
<preference name="SplashScreenDelay" value="2000" />
<preference name="AllowBackForwardNavigationGestures" value="false" />
<feature name="CDVWKWebViewEngine">
    <param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<feature name="StatusBar">
    <param name="ios-package" onload="true" value="CDVStatusBar" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
<plugin name="cordova-plugin-device" spec="1.1.7" />
<plugin name="phonegap-plugin-push" spec="2.0.0" />
<plugin name="cordova-plugin-splashscreen" spec="4.1.0" />
<plugin name="cordova-plugin-whitelist" spec="~1.3.3" />
<plugin name="cordova-plugin-touch-id" spec="~3.2.0" />
<plugin name="cordova-plugin-statusbar" spec="2.3.0" />
<plugin name="cordova-plugin-wkwebview-engine" spec="~1.1.4" />
<plugin name="cordova-plugin-inappbrowser-wkwebview" spec="^1.0.4" />
<engine name="ios" spec="~4.5.3" />
Run Code Online (Sandbox Code Playgroud)

这是它正在加载的页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Security-Policy">
    <meta name="viewport" content="viewport-fit=cover", initial-scale=1, width=device-width">
    <link href="content/css/font-awesome.css" rel="stylesheet" />
    <title>Wealth Access</title>   
</head>
<body>    
    <!-- Scripts -->
    <script src="cordova.js"></script>
    <script src="scripts/jquery/jquery-1.9.1.min.js"></script>
    <script src="scripts/index.js"></script>
    <script type="text/javascript" src="js/TouchID.js"></script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)