当 InAppBrowser 为 iOS 版本的 Cordova 启动时如何显示加载微调器/指示器

Question

我们正在尝试在 Cordova 3.4 的 iOS 版本上启动 InAppBrowser 实例时显示网页正在加载的指示符。

Android 在底部有一个微调器时可以正常工作，但 iOS 只显示白屏，直到页面突然弹出。

我们最初正在研究使用事件侦听器：

https://github.com/apache/cordova-plugin-inappbrowser/blob/dev/doc/index.md#addeventlistener

监听 loadstart 和 loadstop 并添加 js/css 以在 appbrowser 窗口中显示加载

https://github.com/apache/cordova-plugin-inappbrowser/blob/dev/doc/index.md#executescript 和 https://github.com/apache/cordova-plugin-inappbrowser/blob/dev/doc/index.md#insertcss

仍在研究可行的解决方案。

Answer 1

iOS InAppBrowser 对象有自己的微调器，它会自动添加到 web 视图中。

但是，由于微调器被创建为 UIActivityIndi​​catorViewStyleWhite 并且 webview 的背景是白色的，所以您看不到它。

所以我这样更新：

self.spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];

此外，微调框的 x 坐标位于 iPhone 视图的边界之外。为了解决这个问题，我将框架更新为：

self.spinner.frame = CGRectMake(self.view.frame.size.width / 2 - 10, self.view.frame.size.height/ 2 - 10, 20, 20);

无论您使用什么尺寸的设备，这都应该使微调器居中。

我只在纵向模式下测试过。

您可能想要 fork Cordova（我正在使用 3.4 进行测试）并提交补丁或查看是否有“正确”的方法来执行此操作。

Answer 2

对于使用 Phonegap Build 的其他人，您可以使用我的公共插件来实现这些更改并使加载指示器（微调器）在 iOS 中显示为应有的样子。

将此添加到您的 Phonegap Build 项目中的 config.xml 中，以代替默认的 InAppBrowser 插件，以获得 Goku 上述描述的灰色微调器：

<gap:plugin name="com.cordova.plugin.inappbrowser.with.loading.spinner" version="1.0.2" />