Unable to use the InAppBrowser plugin for Phonegap 3.1 on iOS 7

Question

I'm in the process of porting an iOS app I built using Phonegap to iOS7 with Phonegap 3.1 and I've run into a little issue.

iOS 7 seems to have made some significant changes in that hyperlinks with the target="_blank" attribute are now opened by default within the app itself, rather than in the system browser (this doesn't seem to happen on Android, or previous versions of iOS, however). This has broken some of the functionality of the app, and I need to correct this.

Using the InAppBrowser plugin seems like the way to go, so I've installed the plugin. I've amended my config.xml to include this:

<feature name="InAppBrowser">
        <param name="ios-package" value="CDVInAppBrowser" />
</feature>

And the link in the template now looks like this (please note I'm using Handlebars as the templating system here):

<a href="#" onclick="window.externalbrowser = window.open('{{this.url}}, ', '_system', 'location=yes');" data-transition="slide">
    <img alt="Favicon" style="border: 1px solid #ccc;" title="Favicon" class="ui-li-icon" src="{{this.favicon_url}}"></img>
    <p style="font-size: 100%"><strong>Submitted {{this.whenSubmitted}}</strong><br />Last changed {{this.lastChanged}}</p>
</a>

Whenever I click the link, it fails to open and I get the following error appear in the logs:

Plugin 'InAppBrowser' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml.
2013-11-08 10:22:56.753 MyApp[197:60b] -[CDVCommandQueue executePending] [Line 117] FAILED pluginJSON = [
  "InAppBrowser814285423",
  "InAppBrowser",
  "open",
  [
    "http:\/\/www.site.co.uk\/deals-offers-savings\/b?ie=UTF8&node=350613011&tag=page0e-21,",
    "_system",
    "location=yes"
  ]
]

There are also a number of deprecation warnings about the CDVInAppBrowser.m source file.

I can't for the life of me see why the plugin is not being picked up. Can anyone else suggest what the issue might be?

Answer 1

I found a true solution for this without having to recreate the project. based on this answer: similar question and answer

It appears that this happens because sometimes the xcode project files aren't update after adding/removing plugins. All the files are in place, and the config.xml is in order but the xcode project fails to mark the new plugin files as targetting the application.

Solution:

1. Open your project in xcode
2. Navigate to the plugin file in question (CDV*.m file)
3. On the right hand menu, under the "Target Membership" section make sure the checkbox is checked for your application.

Answer 2

UPDATE - Try barryrowe's answer below before resorting to recreating a brand new project. It's a simple, easy to follow solution that appears to work well. Thanks Barry!

I've come across a similar error several times after removing plugins and reinstalling them. The only solution that has ever worked for me is to start afresh with a brand new app project, then copy back in the files from my 'www' folder and redo any necessary changes in Xcode.

Looking at https://issues.apache.org/jira/browse/CB-4971 it seems like this is a bug that the Cordova team is trying to track down. That link has some alternative suggestions, but starting afresh is still probably easier, unless your app has a lot of custom Xcode changes that would need to be re-done.

I'm not that familiar with Handlebars, but your code looks to have an extra comma and space after {{this.url}}. But I think your main problem is related to the plugin itself, not the code.

By the way, if you've installed the InAppBrowser plugin correctly using the command line, you won't need to manually alter the config.xml file, as the necessary plugin code will automatically be added to the config.xml files of the relevant platforms when you next build your project.

Answer 3

Its an easy fix:

There should also be an org.apache.cordova.inappbrowser directory within your /plugins/ and /platforms/ios/myApp/Plugins/ folders. It should look like:

-----/org.apache.cordova.inappbrowser
---------/CDVInAppBrowser.h
---------/CDVInAppBrowser.m

Answer 4

For some reason, org.apache.cordova.inappbrowser didn't seem to work with my app - maybe an upgrade or something broke functionality. The plugin was present as @star18bit suggested, but I think my issue was compatibility.

I removed the existing plugin:

cordova plugin remove org.apache.cordova.inappbrowser

Reinstalled using cordova-plugin-inappbrowser:

cordova plugin add cordova-plugin-inappbrowser

After an ionic build ios and relaunch, the issue was resolved.