phonegap inappbrowser IOS 不工作

Posted 2023-03-15

【中文标题】phonegap inappbrowser IOS 不工作

【英文标题】：phonegap inappbrowser IOS not working

【发布时间】：2014-06-27 14:24:08

【问题描述】：

我在 phonegap 中为 ios 创建了一个项目，我想在我的 IOS 浏览器中打开一个 ulr，但不是在我的应用程序中。我尝试使用 inAppBrowser 插件，但它似乎不起作用。 我只使用.html, .css, .js files and the config.xml，并且我在Windows上，我使用在线工具Adobe Phonegap builder构建我的项目

如果我猜对了，根据这个链接https: build.phonegap.com/plugins/658，就不需要安装你想使用的插件，正如一些人建议的那样，使用命令cordova plugin add...。您可以通过在 config.xml 文件中引用插件来完成您的工作。我对吗？ 我的 config.xml 文件：

<?xml version="1.0" encoding="UTF-8"?>

<widget xmlns = " www.w3.org/ns/widgets"
        xmlns:gap = " phonegap.com/ns/1.0"
    id    = "com.test.testingApp"
    version   = "1.0.0">

    <name>test</name>

    <!-- app icons and splashscreen -->
    <icon src="icon.png" /> 
    <gap:splash src="splash.png" />

    <platform name="android">
        <icon density="mdpi" src="res/android/icon-48-hdpi.png" />
        <icon density="hdpi" src="res/android/icon-72-hdpi.png" />
        <icon density="xhdpi" src="res/android/icon-96-hdpi.png" />
        <icon density="xxhdpi" src="res/android/icon-144-hdpi.png" />

        <gap:splash gap:density="mdpi" src="splash.png"   />
        <gap:splash gap:density="hdpi" src="splash.png"   />
        <gap:splash gap:density="xhdpi" src="splash.png"   />
        <gap:splash gap:density="xxhdpi" src="splash.png" />
    </platform>

    <platform name="ios">
    <!-- iOS 7.0+ -->
    <!-- iPhone / iPod Touch  -->
        <icon src="res/ios/icon-60.png"   />
        <icon src="res/ios/[e-mail]"   />
        <!-- iPad -->
        <icon src="res/ios/icon-76.png"   />
        <icon src="res/ios/[e-mail]"   />
        <!-- iOS 6.1 -->
        <!-- Spotlight Icon -->
        <icon src="res/ios/icon-40.png"   />
        <icon src="res/ios/[e-mail]"   />
        <!-- iPhone / iPod Touch -->
        <icon src="res/ios/icon.png"   />
        <icon src="res/ios/[e-mail]"   />
        <!-- iPad -->
        <icon src="res/ios/icon-72.png"   />
        <icon src="res/ios/[e-mail]"   />
        <!-- iPhone Spotlight and Settings Icon -->
        <icon src="res/ios/icon-small.png"   />
        <icon src="res/ios/[e-mail]"   />
        <!-- iPad Spotlight and Settings Icon -->
        <icon src="res/ios/icon-50.png"   />
        <icon src="res/ios/[e-mail]"   />
    </platform>


    <preference name="phonegap-version" value="3.3.0" />



    <!-- splashscreen delay -->
    <preference name="SplashScreenDelay" value="5000" /> 

    <access origin="*" browserOnly="true"/>

    <!-- <content src=" mysite.com/myapp.html" /> for external pages -->
    <content src="index.html" />

    <preference name="loglevel" value="DEBUG" />

    <!-- <preference name="orientation" value="portrait" /> -->

  <preference name="loadUrlTimeoutValue" value="20000" />
  <preference name="InAppBrowserStorageEnabled" value="true" />
    <!--
  <preference name="splashscreen" value="resourceName" />
  <preference name="backgroundColor" value="0xFFF" />
  <preference name="loadUrlTimeoutValue" value="20000" />
  <preference name="InAppBrowserStorageEnabled" value="true" />
  <preference name="disallowOverscroll" value="true" />
    <preference name="keepRunning" value="false" />
    --> 

    <feature name="App">
  <param name="android-package" value="org.apache.cordova.App"/>
    </feature>
    <feature name="Geolocation">
  <param name="android-package" value="org.apache.cordova.GeoBroker"/>
    </feature>
    <feature name="Device">
  <param name="android-package" value="org.apache.cordova.Device"/>
    </feature>
    <!--
    <feature name="Accelerometer">
  <param name="android-package" value="org.apache.cordova.AccelListener"/>
    </feature>
    <feature name="Compass">
  <param name="android-package" value="org.apache.cordova.CompassListener"/>
    </feature>
    <feature name="Media">
  <param name="android-package" value="org.apache.cordova.AudioHandler"/>
    </feature>
    <feature name="Camera">
  <param name="android-package" value="org.apache.cordova.CameraLauncher"/>
    </feature>
    <feature name="Contacts">
  <param name="android-package" value="org.apache.cordova.ContactManager"/>
    </feature>
    <feature name="File">
  <param name="android-package" value="org.apache.cordova.FileUtils"/>
    </feature>
    -->
    <feature name="NetworkStatus">
  <param name="android-package" value="org.apache.cordova.NetworkManager"/>
    </feature>
    <feature name="Notification">
  <param name="android-package" value="org.apache.cordova.Notification"/>
    </feature>
    <!--
    <feature name="Storage">
  <param name="android-package" value="org.apache.cordova.Storage"/>
    </feature>
    <feature name="FileTransfer">
  <param name="android-package" value="org.apache.cordova.FileTransfer"/>
    </feature>
    <feature name="Capture">
  <param name="android-package" value="org.apache.cordova.Capture"/>
    </feature>
    <feature name="Battery">
  <param name="android-package" value="org.apache.cordova.BatteryListener"/>
    </feature>
    -->
    <feature name="SplashScreen">
  <param name="android-package" value="org.apache.cordova.SplashScreen"/>
    </feature>
    <feature name="SplashScreen">
        <param name="ios-package" value="CDVSplashScreen" />
    </feature>
    <!--
    <feature name="Echo">
  <param name="android-package" value="org.apache.cordova.Echo"/>
    </feature>
    <feature name="Globalization">
  <param name="android-package" value="org.apache.cordova.Globalization"/>
    </feature>
    -->
    <feature name="InAppBrowser"> 
        <param name="android-package" value="org.apache.cordova.inappbrowser.InAppBrowser"/>
    </feature>
    <feature name="InAppBrowser">
        <param name="ios-package" value="CDVInAppBrowser" /> 
    </feature>

    <!-- Deprecated plugins element. Remove in 3.0 -->
    <plugins>
        <gap:plugin name="org.apache.cordova.inappbrowser" version="0.3.3" />
    </plugins>
</widget>

我的 index.html 文件是：

<html> 
<head>      
    <meta charset="utf-8" />
    <meta id="extViewportMeta" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

    <title>Hello World</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8" src="cordova_plugins.js"></script>

    <link rel="stylesheet" href="  code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"> 
    <script src="  code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="  code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> 
</head> 

<body> 
<div data-role="page">

    <!-- MAIN BODY -->
    <div data-role="content" role="main" style="padding-bottom:230px;">
        <div class="main_header">
                    <br />      
                    <a href="#" onclick="window.open(' www.google.com', '_blank', 'location=yes'); return false;">PlanTech</a>
                    <br />      
                    <a href="#" onclick="window.open(' www.google.com', '_system', 'location=no');return false; ">PlanTech</a>
        </div>
    </div>
</div>

<div id="highlight"></div>
</body>
</html>

问题是两个链接都在我的应用程序内打开（而不是像他们应该的那样在单独的浏览器中打开）。结果，在单击其中一个链接而不结束应用程序并重新启动它之后，就没有机会返回我的index.html 页面。 如果有人能帮我解决这个问题，我将不胜感激，因为我在互联网上搜索了几次，但我被卡住了。 提前感谢大家的宝贵时间。

【参考方案1】：

我对此有一个解决方案... there is no chance to get back to my index.html page after one of the links clicked

如果你通过完整的documentation，

1 - 返回窗口对象，如

     var ref = window.open ('www.google.com', '_blank', 'location=yes');

2 - 为退出事件添加事件监听器。

    ref.addEventListener(exit, myexitcallback);

3 - close 方法将关闭浏览器窗口。所以，在你的函数回调中：

function myexitcallback
   ref.close();

希望这能解决您的问题。 祝你好运。

【讨论】：

这并没有解决我的问题。该链接仍会在我的应用程序中打开，而不是作为应有的单独应用程序打开。当然，在我的应用程序中没有返回按钮或类似的东西来指示返回，而无需先退出它。所以我还是有疑问if reffering the plugin in config.xml is enough for the online builder to install the inAppBrowser plugin in my app

【参考方案2】：

最后，我自己找到了问题的解决方案。像往常一样，它就在我的眼前，但如果我没有幸运看到它，我不会在一千年内找到它。

正如config.xml 本身所暗示的那样：<!-- Deprecated plugins element. Remove in 3.0 -->

所以我不得不更改以下代码

<plugins>
    <gap:plugin name="org.apache.cordova.inappbrowser" version="0.3.3" />
</plugins>

用这个：

<gap:plugin name="org.apache.cordova.inappbrowser" version="0.3.3" />