InAppBrowser无法在适用于iOS的Phonegap 3.4.0中运行

时间:2014-06-18 10:28:51

标签: android ios cordova phonegap-plugins inappbrowser

我正在尝试使用phonegap 3.4.0和jQuery mobile 1.4.0为iOS构建应用程序。我已经尝试过每个人都建议的一切。在应用程序中,我将点击链接,它在应用程序中打开,但没有后退按钮或任何东西。因此,我必须强制关闭应用程序并重新开始返回主屏幕。我有以下内容:

<a href="#" onclick="window.open('http://ok-ecig.com','_blank','location=no,closebuttoncaption=Done');" class="ui-btn"><i class="fa fa-shopping-cart fa-2x"></i><span> Shop Now</span></a>

在我的config.xml文件中:

<?xml version="1.0" encoding="UTF-8"?>
<!-- config.xml reference: https://build.phonegap.com/docs/config-xml -->
<widget xmlns     = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id        = "com.[author].[appname]"
version   = "1.0.0">

<name>App Name</name>

<description>
</description>

<author href="http://appauthor.com">
    App Author
</author>

<!--
 Enable individual API permissions here.
 The "device" permission is required for the 'deviceready' event.
 -->
<feature name="http://api.phonegap.com/1.0/device" />
<feature name="InAppBrowser">
    <param name="ios-package" value="CDVInAppBrowser" />
</feature>

<plugin name="InAppBrowser" value="org.apache.cordova.InAppBrowser" />

<!--
 If you do not want any permissions to be added to your app, add the
 following tag to your config.xml; you will still have the INTERNET
 permission on your app, which PhoneGap requires.
 -->
<preference name="permissions"                value="none"/>

<!-- Customize your app and platform with the preference element. -->
<!-- <preference name="phonegap-version"      value="3.4.0" /> -->      <!-- all: current version of PhoneGap -->
<preference name="orientation"                value="portrait" />        <!-- all: default means both landscape and portrait are enabled -->
<preference name="target-device"              value="handset" />      <!-- all: possible values handset, tablet, or universal -->
<preference name="fullscreen"                 value="true" />           <!-- all: hides the status bar at the top of the screen -->
 <preference name="DisallowOverscroll"         value="true" />
 <preference name="webviewbounce"              value="false" />
 <preference name="UIWebViewBounce"            value="false" />        <!-- ios: control whether the screen 'bounces' when scrolled beyond the top -->

<preference name="prerendered-icon"           value="true" />           <!-- ios: if icon is prerendered, iOS will not apply it's gloss to the app's icon on the user's home screen -->
<preference name="stay-in-webview"            value="true" />          <!-- ios: external links should open in the default browser, 'true' would use the webview the app lives in -->
<preference name="ios-statusbarstyle"         value="black-opaque" />   <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar -->
<preference name="detect-data-types"          value="true" />           <!-- ios: controls whether data types (such as phone no. and dates) are automatically turned into links by the system -->
<preference name="exit-on-suspend"            value="false" />          <!-- ios: if set to true, app will terminate when home button is pressed -->
<preference name="show-splash-screen-spinner" value="true" />           <!-- ios: if set to false, the spinner won't appear on the splash screen during app loading -->
<preference name="auto-hide-splash-screen"    value="true" />           <!-- ios: if set to false, the splash screen must be hidden using a JavaScript API -->

<preference name="disable-cursor"             value="false" />

<!-- blackberry: prevents a mouse-icon/cursor from being displayed on the app -->
<preference name="android-minSdkVersion"      value="7" />              <!-- android: MIN SDK version supported on the target device. MAX version is blank by default. -->
<preference name="android-installLocation"    value="auto" />           <!-- android: app install location. 'auto' will choose. 'internalOnly' is device memory. 'preferExternal' is SDCard. -->

<!-- Plugins can also be added here. -->
<!--
 <gap:plugin name="Example" />
 A list of available plugins are available at https://build.phonegap.com/docs/plugins
 -->
<gap:plugin name="org.apache.cordova.inappbrowser" version="0.2.4" />

<!-- Define app icon for each platform. -->
<icon src="icon.png" />
<icon src="res/icon/android/icon-36-ldpi.png"   gap:platform="android"    gap:density="ldpi" />
<icon src="res/icon/android/icon-48-mdpi.png"   gap:platform="android"    gap:density="mdpi" />
<icon src="res/icon/android/icon-72-hdpi.png"   gap:platform="android"    gap:density="hdpi" />
<icon src="res/icon/android/icon-96-xhdpi.png"  gap:platform="android"    gap:density="xhdpi" />
<icon src="res/icon/blackberry/icon-80.png"     gap:platform="blackberry" />
<icon src="res/icon/blackberry/icon-80.png"     gap:platform="blackberry" gap:state="hover"/>
<icon src="res/icon/ios/icon-57.png"            gap:platform="ios"        width="57" height="57" />
<icon src="res/icon/ios/icon-72.png"            gap:platform="ios"        width="72" height="72" />
<icon src="res/icon/ios/icon-57-2x.png"         gap:platform="ios"        width="114" height="114" />
<icon src="res/icon/ios/icon-72-2x.png"         gap:platform="ios"        width="144" height="144" />
<icon src="res/icon/webos/icon-64.png"          gap:platform="webos" />
<icon src="res/icon/windows-phone/icon-48.png"  gap:platform="winphone" />
<icon src="res/icon/windows-phone/icon-173.png" gap:platform="winphone"   gap:role="background" />

<plugin name="InAppBrowser" value="CDVInAppBrowser" />

<!-- Define app splash screen for each platform. -->
<gap:splash src="res/screen/android/screen-ldpi-portrait.png"  gap:platform="android" gap:density="ldpi" />
<gap:splash src="res/screen/android/screen-mdpi-portrait.png"  gap:platform="android" gap:density="mdpi" />
<gap:splash src="res/screen/android/screen-hdpi-portrait.png"  gap:platform="android" gap:density="hdpi" />
<gap:splash src="res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:density="xhdpi" />
<gap:splash src="res/screen/blackberry/screen-225.png"         gap:platform="blackberry" />
<gap:splash src="res/screen/ios/screen-iphone-portrait.png"    gap:platform="ios"     width="320" height="480" />
<gap:splash src="res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios"     width="640" height="960" />
<gap:splash src="res/screen/ios/screen-ipad-portrait.png"      gap:platform="ios"     width="768" height="1024" />
<gap:splash src="res/screen/ios/screen-ipad-landscape.png"     gap:platform="ios"     width="1024" height="768" />
<gap:splash src="res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone" />
<gap:config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance" overwrite="true">
    <false/>
</gap:config-file>

<!--
 Define access to external domains.

 <access />            - a blank access tag denies access to all external resources.
 <access origin="*" /> - a wildcard access tag allows access to all external resource.

 Otherwise, you can specify specific domains:
 -->
<access origin="http://127.0.0.1*"/> <!-- allow local pages -->
<access origin="*" />
<!--
 <access origin="http://phonegap.com" />                    - allow any secure requests to http://phonegap.com/
 <access origin="http://phonegap.com" subdomains="true" />  - same as above, but including subdomains, such as http://build.phonegap.com/
 <access origin="http://phonegap.com" browserOnly="true" /> - only allows http://phonegap.com to be opened by the child browser.
 -->

我的index.html标题:

<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.min.css" />
<link rel="stylesheet" href="fa/css/font-awesome.min.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.0-rc.1.js"></script>
<script src="cordova.js"></script><!-- 3.4.0 -->

我错过了什么?

3 个答案:

答案 0 :(得分:6)

让我告诉你我是如何使用它的。它可以帮助您找出问题。

config.xml中,您应该拥有以下内容:

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

...

<access origin="*" />

...

<feature name="InAppBrowser">
  <param name="android-package" value="org.apache.cordova.InAppBrowser"/>
</feature>
<feature name="InAppBrowser">
    <param name="ios-package" value="CDVInAppBrowser" />
</feature>

...

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



在要与innAppBrowser打开链接的每个.html文件中,您应该具有以下内容:

<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css"> 

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

<script type="text/javascript" charset="utf-8" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.4.2.min.js></script> 


注意:我认为cordova.js应该是您的代码中包含的第一个javascript。任何其他javascripts应遵循。

希望能帮助到你!

答案 1 :(得分:3)

听起来像inapp浏览器插件没有加载。

通过您的配置,您似乎正在使用手机间隙构建来构建项目。但它包含手机间隙构建和常规手机间隙配置项的混合。

由于您正在使用构建,因此您应该只使用:

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

添加inapp浏览器插件。见https://build.phonegap.com/plugins/658

您应该删除此插件以及对该插件的任何其他引用:

<plugin name="InAppBrowser" value="CDVInAppBrowser" />

这应该能够正确加载插件,并且您应该能够验证它是否包含在手机间隙构建页面的构建中。

(如果您没有使用phonegap构建,则需要删除与构建相关的配置项,并按照此处的说明在本地安装插件http://docs.phonegap.com/en/3.4.0/guide_cli_index.md.html#The%20Command-Line%20Interface

答案 2 :(得分:0)

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

将确保inappbrowser插件是您的项目。

确保您的index.html包含第一个javascript中的cordova.js。

这对我的项目很有用。