Cordova 2.2 + ChildBrowser 3.0.4 + iOS == FAIL

Question

I am simply trying to set up a function in my PhoneGap app that opens certain links in an external browser. The code appears to work fine on Android (and I didn't test on Windows Phone, as the plugin info claims that support isn't there, yet...), but every time I try to get this to run in the iPhone Simulator (iOS 5.1), it blows up with the following error:

testCB[3332:c07] CDVPlugin class childbrowser.js (pluginName: ChildBrowser) does not exist.
testCB[3332:c07] ERROR: Plugin 'ChildBrowser' not found, or is not a CDVPlugin. Check your plugin mapping in Cordova.plist.
testCB[3332:c07] -[CDVCommandQueue executePending] [Line 102] FAILED pluginJSON = ["ChildBrowser1249404349","ChildBrowser","showWebPage",["http://www.apple.com",{"showLocationBar":true}]]

I've looked all over the forums and here, and I keep seeing people refer to updating the Cordova.plist file. Fine, so here that is (and note, this is for a brand new Cordova app, not an upgrade or update, I am trying this with a test app, now, to rule out wonkiness in my own app):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <!-- the standard keys snipped -->
    <key>ExternalHosts</key>
    <array>
        <string>*</string>
    </array>
    <key>Plugins</key>
    <dict>
        <key>ChildBrowser</key>
        <string>childbrowser.js</string>
        <key>ChildBrowserCommand</key>
        <string>ChildBrowserCommand</string>
        <key>Device</key>
        <string>CDVDevice</string>
        <key>Logger</key>
        <string>CDVLogger</string>
        <key>Compass</key>
        <string>CDVLocation</string>
        <key>Accelerometer</key>
        <string>CDVAccelerometer</string>
        <key>Camera</key>
        <string>CDVCamera</string>
        <key>NetworkStatus</key>
        <string>CDVConnection</string>
        <key>Contacts</key>
        <string>CDVContacts</string>
        <key>Debug Console</key>
        <string>CDVDebugConsole</string>
        <key>Echo</key>
        <string>CDVEcho</string>
        <key>File</key>
        <string>CDVFile</string>
        <key>FileTransfer</key>
        <string>CDVFileTransfer</string>
        <key>Geolocation</key>
        <string>CDVLocation</string>
        <key>Notification</key>
        <string>CDVNotification</string>
        <key>Media</key>
        <string>CDVSound</string>
        <key>Capture</key>
        <string>CDVCapture</string>
        <key>SplashScreen</key>
        <string>CDVSplashScreen</string>
        <key>Battery</key>
        <string>CDVBattery</string>
        <key>Globalization</key>
        <string>CDVGlobalization</string>
    </dict>
</dict>
</plist>

(EDIT) In my index.html file, I have included (I realize that this almost goes without saying. I also realize a lot of questions get posted by people who don't think about trying all the obvious stuff first!):

    <script type="text/javascript" src="cordova-2.2.0.js"></script>
    <script type="text/javascript" src="childbrowser.js"></script>

My js call looks like:

onDeviceReady: function() {
    app.receivedEvent('deviceready');

    var link = document.getElementById('launchApple');
    console.log('derp?');

    if(link){
        //var cb = ChildBrowser.install();
        console.log("We're trying to add a click handler link");
        link.addEventListener('click', function() {
                              console.log('click');
                              window.plugins.childBrowser.openExternal('http://www.apple.com'); });
    }

},

When I click the link, I get the above error.

I've tried changing the case of the childbrowser.js file to ChildBrowser.js. I've tried running it in the iPhone 6 emulator. My Plugins folder contains all the files from the package downloaded from https://github.com/alunny/ChildBrowser

I've cleared caches from my ~/Library/Application Support I've tried Clean on the project.

Any thoughts? I'm about to start looking for a good goat or chicken for a quick sacrifice to the "write once, run everywhere" gods (whom I'm fairly certain are descendants of Loki, the Trickster)!

Answer 1

Ok, a couple things. One, a personal "DERP!" but the rest I chalk up to just crummy documentation and weird implementation.

On the front page ( https://github.com/alunny/ChildBrowser ), there is a note by the documentation for .openExternal() that says this is Android-only. This was my "derp!"

(I have yet to find out why there is, however, a hook for onOpenExternal that is stated to be iOS-only...)

Secondly, toss out all the docs that tell you to add childbrowser.js as the string for the ChildBrowser Plugins item. Your plugins should look like:

<key>ChildBrowser</key>
<string>ChildBrowserCommand</string>
<key>ChildBrowserCommand</key>
<string>ChildBrowserCommand</string>

Takeaways from this issue:

• target="_blank" works on <a> tags on the iPhone.
• Make sure you put the ChildBrowser (string) ChildBrowserCommand item in your Plugins list, NOT childbrowser.js!
• .openExternal() does NOT work (at this time) for iPhone, but .showWebPage() does (or, alternatively, if you want openExternal() functionality on the iPhone, I suppose you could set target="_blank" on the anchor tag, and only preventDefault() for platforms that don't support it, like Android).

Answer 2

Add the childbrowser.js to your HTML file, after the cordova.js script, like this:

<script type="text/javascript" src="childbrowser.js"></script>