Cordova InAppBrowser 不适用于 iOS

Question

我正在尝试在 iOS 上使用 Cordova InAppBrowser，但它似乎不起作用。

我找到了一些可能的解决方案：https://goo.gl/G7GfGghttp://goo.gl/sYXfRg

有些需要手动修改文件，但我使用的是Phonegap Build，所以我无法修改插件，还有一些关于config.xml的说明，所以这是我当前的配置：

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
    <widget id="au.gov.nal.hearing.myhearing" version="0.10.3" versionCode="624" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:gap="http://phonegap.com/ns/1.0">

    <gap:platform name="ios"/>
    <gap:platform name="android"/>

    <preference name='phonegap-version' value='cli-5.2.0' />

    <name>My Hearing</name>
    <description>My Hearing App</description>

    <author email="rene@bywave.com.au" href="http://bywave.com.au/">Renemari Padillo</author>

    <content src="index.html"/>

    <preference name="AutoHideSplashScreen" value="true"/>
    <preference name="SplashScreenDelay" value="5000"/>
    <preference name="ShowSplashScreenSpinner" value="false"/>
    <preference name="FadeSplashScreen" value="true"/>
    <preference name="FadeSplashScreenDuration" value="1.0"/>
    <preference name="SplashScreen" value="screen"/>
    <preference name="detect-data-types" value="true"/>
    <preference name="target-device" value="handset"/>

    <access origin="*"/>
    <access origin="*.google.com"/>
    <access origin="*.parse.com"/>
    <access origin="*.googleapis.com"/>
    <access origin="*.gstatic.com"/>
    <access origin="*.googleusercontent.com"/>
    <access origin="google.com" subdomains="true"/>
    <access origin="googleapis.com" subdomains="true"/>
    <access origin="gstatic.com" subdomains="true"/>
    <access origin="googleusercontent.com" subdomains="true"/>
    <access origin="parse.com" subdomains="true"/>
    <access origin="tel:*" launch-external="yes"/>
    <allow-navigation href="*"/>
    <allow-intent href="tel:*" launch-external="yes"/>
    <allow-intent href="*" launch-external="yes"/>
    <gap:plugin name="cordova-plugin-x-socialsharing" source="npm" version="5.0.4"/>
    <gap:plugin name="com.ionic.keyboard" version="1.0.3"/>
    <gap:plugin name="uk.co.whiteoctober.cordova.appversion" version="0.1.4"/>
    <gap:plugin name="org.apache.cordova.splashscreen" version="0.3.4"/>
    <gap:plugin name="cordova-plugin-inappbrowser" source="npm" version="1.0.1"/>
    <gap:plugin name="cordova-plugin-whitelist" source="npm" version="1.0.0"/>
    <gap:plugin name="org.apache.cordova.core.geolocation" version="0.3.10"/>
    <gap:plugin name="com.medlei.pushplugin" version="0.1.2">
        <param name="APP_ID" value="Bd8dbfMRwToBaB8UP0SWZ0ZlgYJ2o1CqMtFqzkuh"/>
        <param name="CLIENT_KEY" value="0ev2Je3JX3ln5XJHTsFTbJwNpG7k5eXpt5l83CVs"/>
    </gap:plugin>
    <icon src="resources/icon.png"/>
    <icon gap:platform="android" src="resources/android/icon/drawable-ldpi-icon.png" gap:density="ldpi"/>
    <icon gap:platform="android" src="resources/android/icon/drawable-mdpi-icon.png" gap:density="mdpi"/>
    <icon gap:platform="android" src="resources/android/icon/drawable-hdpi-icon.png" gap:density="hdpi"/>
    <icon gap:platform="android" src="resources/android/icon/drawable-xhdpi-icon.png" gap:density="xhdpi"/>
    <icon gap:platform="android" src="resources/android/icon/drawable-xxhdpi-icon.png" gap:density="xxhdpi"/>
    <icon gap:platform="android" src="resources/android/icon/drawable-xxxhdpi-icon.png" gap:density="xxxhdpi"/>
    <icon gap:platform="ios" src="resources/ios/icon/icon.png" width="57" height="57"/>
    <icon gap:platform="ios" src="resources/ios/icon/icon@2x.png" width="114" height="114"/>
    <icon gap:platform="ios" src="resources/ios/icon/icon-40.png" width="40" height="40"/>
    <icon gap:platform="ios" src="resources/ios/icon/icon-40@2x.png" width="80" height="80"/>
    <icon gap:platform="ios" src="resources/ios/icon/icon-50.png" width="50" height="50"/>
    <icon gap:platform="ios" src="resources/ios/icon/icon-50@2x.png" width="100" height="100"/>
    <icon gap:platform="ios" src="resources/ios/icon/icon-60.png" width="60" height="60"/>
    <icon gap:platform="ios" src="resources/ios/icon/icon-60@2x.png" width="120" height="120"/>
    <icon gap:platform="ios" src="resources/ios/icon/icon-60@3x.png" width="180" height="180"/>
    <icon gap:platform="ios" src="resources/ios/icon/icon-72.png" width="72" height="72"/>
    <icon gap:platform="ios" src="resources/ios/icon/icon-72@2x.png" width="144" height="144"/>
    <icon gap:platform="ios" src="resources/ios/icon/icon-76.png" width="76" height="76"/>
    <icon gap:platform="ios" src="resources/ios/icon/icon-76@2x.png" width="152" height="152"/>
    <icon gap:platform="ios" src="resources/ios/icon/icon-small.png" width="29" height="29"/>
    <icon gap:platform="ios" src="resources/ios/icon/icon-small@2x.png" width="58" height="58"/>
    <icon gap:platform="ios" src="resources/ios/icon/icon-small@3x.png" width="87" height="87"/>
    <gap:splash src="resources/splash.png"/>
    <gap:splash gap:platform="android" src="resources/android/splash/drawable-land-ldpi-screen.png" gap:qualifier="land-ldpi"/>
    <gap:splash gap:platform="android" src="resources/android/splash/drawable-land-mdpi-screen.png" gap:qualifier="land-mdpi"/>
    <gap:splash gap:platform="android" src="resources/android/splash/drawable-land-hdpi-screen.png" gap:qualifier="land-hdpi"/>
    <gap:splash gap:platform="android" src="resources/android/splash/drawable-land-xhdpi-screen.png" gap:qualifier="land-xhdpi"/>
    <gap:splash gap:platform="android" src="resources/android/splash/drawable-land-xxhdpi-screen.png" gap:qualifier="land-xxhdpi"/>
    <gap:splash gap:platform="android" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" gap:qualifier="land-xxxhdpi"/>
    <gap:splash gap:platform="android" src="resources/android/splash/drawable-port-ldpi-screen.png" gap:qualifier="port-ldpi"/>
    <gap:splash gap:platform="android" src="resources/android/splash/drawable-port-mdpi-screen.png" gap:qualifier="port-mdpi"/>
    <gap:splash gap:platform="android" src="resources/android/splash/drawable-port-hdpi-screen.png" gap:qualifier="port-hdpi"/>
    <gap:splash gap:platform="android" src="resources/android/splash/drawable-port-xhdpi-screen.png" gap:qualifier="port-xhdpi"/>
    <gap:splash gap:platform="android" src="resources/android/splash/drawable-port-xxhdpi-screen.png" gap:qualifier="port-xxhdpi"/>
    <gap:splash gap:platform="android" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" gap:qualifier="port-xxxhdpi"/>
    <gap:splash gap:platform="ios" src="resources/ios/splash/Default-568h@2x~iphone.png" height="1136" width="640"/>
    <gap:splash gap:platform="ios" src="resources/ios/splash/Default-667h@2x.png" height="1334" width="750"/>
    <gap:splash gap:platform="ios" src="resources/ios/splash/Default-736h.png" height="2208" width="1242"/>
    <gap:splash gap:platform="ios" src="resources/ios/splash/Default-Landscape-736h.png" height="1242" width="2208"/>
    <gap:splash gap:platform="ios" src="resources/ios/splash/Default-Portrait-736h@3x.png" width="1242" height="2208"/>
    <gap:splash gap:platform="ios" src="resources/ios/splash/Default-Landscape-736h@3x.png" width="2208" height="1242"/>
    <gap:splash gap:platform="ios" src="resources/ios/splash/Default-Landscape@2x~ipad.png" height="1536" width="2048"/>
    <gap:splash gap:platform="ios" src="resources/ios/splash/Default-Landscape~ipad.png" height="768" width="1024"/>
    <gap:splash gap:platform="ios" src="resources/ios/splash/Default-Portrait@2x~ipad.png" height="2048" width="1536"/>
    <gap:splash gap:platform="ios" src="resources/ios/splash/Default-Portrait~ipad.png" height="1024" width="768"/>
    <gap:splash gap:platform="ios" src="resources/ios/splash/Default@2x~iphone.png" height="960" width="640"/>
    <gap:splash gap:platform="ios" src="resources/ios/splash/Default~iphone.png" height="480" width="320"/>
</widget>

因此，为了确保这一点，我还将该插件与 ngCordova's InAppBrowser 配对

$cordovaInAppBrowser.open('tel:' + vm.phone, '_system');

index.html

<!-- Enable all requests, inline styles, and eval() -->
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">

该应用没有产生任何错误，通话链接在 Android 上运行良好，但在 iOS 上却不行。

有人对此有解决方案吗？

如果您需要更多技术细节，请告诉我。

谢谢

Answer 1

@Renesansz，
第 10 名，共 Top Mistakes by Developers new to Cordova/Phonegap
此外，该链接包含更多特定于 iOS 的信息。

我引用：

#10 不在 config.xml 和“内容安全策略”中添加新的“白名单”、“白名单插件”参数

这太新太令人讨厌了，只能对返回的开发人员感到遗憾。此外，这在 Phonegap 博客和 Cordova 博客中都被埋没了。

这个相对 * 新 * 要求意味着——要访问网络上的任何网站或资源，您必须使用白名单和白名单插件。如果您使用的是 cordova-android@4.0.0 或更高版本，此要求将生效；包括 cli-5.1.1。但是，如果您的版本是 4.0.0 之前的版本，比如说 3.5.0 或 3.7.0，那么您将不必添加白名单要求。

需要明确的是，“白名单”已经存在了一段时间，但插件和要求是非常新的。如您所料，当添加“白名单”时，事实上的开放访问功能已被弃用。或者换一种说法，事实上的开放访问功能是计划和计划取消的。这一变化标志着在移除开放获取功能方面迈出了一步。

此外，内容安全政策 (CSP) 吸引了众多开发人员 - 因为它的宣传太差了。 根据您的使用和您使用的Phonegap 版本，CSP 需要进入您使用的每个HTML 页面，就像您必须等待“设备就绪”一样。但是，在某些情况下根本不需要它。文档让某些人感到困惑，请仔细阅读。 该文档隐藏在许多最新文档页面的底部。

Answer 2

@Renesansz，
在我们解决可能的问题之前，我正在添加一些您可以解决的问题。

我很清楚，我应该让你解决困扰大多数人的另外两个主要问题。在您的情况下，还有第三个和第四个问题。接下来需要做的四件事是：

1. 在您的编译器上添加一个版本 - 见下文
2. 从 NPM 获取所有插件 - 见下文
3. 为您的所有插件添加版本 - 见下文
4. 删除所有关于 <feature (...)> 的引用 - 见下文

在 1.、2.和 3.

来自Top Mistakes by Developers new to Cordova/Phonegap，您已点击：

• #6 没有为你的编译器设置“phonegap 版本”
• #7 没有为你的插件设置“版本”
• #11 您现在需要从 NPM 获取插件。

#6 & #7

你没有版本号 使用 CLI 版本，如果您没有为您的平台或“Phonegap Build”分配版本，如果您没有在 config.xml 中设置 phonegap-version，您将获得最新版本。如果幸运的话，您的程序会按预期运行。如果你不走运，你会得到一系列级联错误。

幸运的是，Holly Schinsky 写了一篇很好的博文来解释这一切：

Cordova/PhoneGap 版本混乱
http://devgirl.org/2014/11/07/cordovaphonegap-version-confusion/

虽然文章有点过时，但概念和方向是正确的。只是，请确保您使用新拼写的名称，使用破折号，而不是句点。

您现在需要从 NPM 获取插件。

关于采购插件的规则可能相当混乱。最好的办法是阅读下面的博客文章。使用 CLI 的开发者可以从 github 获取源码，再次查看博文。

2015-10-09 - 在没有公告、推文或博客的情况下，存储库会比计划提前整整一周更改。我什么都做不了，只能抱怨……这太烦人了。

新新Cordova npm search page

在 4.

<feature> 标签已弃用。这意味着它们不再被使用。 你可以read about it here

我引用

除了debug-server 功能之外，<feature> 标记在 PhoneGap Build 上基本上已被弃用，因为 PhoneGap API 已被插件化。权限现在通常由单独的插件管理，应用程序清单和权限可以直接使用config-file element 进行修改。然而，为了向后兼容，它们仍然受支持并映射到 Android 和 Windows Phone 8 上的设备权限：

换句话说，你有一个重复的配置，它什么也没做。拿出来。