In order to install the latest Cordova PhoneGap 1.7.0 version on my Mac Mini, I needed to upgrade to OSX Lion, then upgrade to Xcode 4.3.2 (both via the Mac App Store). After their installation, I downloaded PhoneGap 1.7.0 from the button at http://www.phonegap.com. Once it downloaded, I double-clicked on the Cordova-1.7.0.dmg file found in my new Downloads/phonegap-phonegap-475bfd2/lib/ios folder.
This is how I recreated my old PhoneGap 1.0.0 project to implement PhoneGap 1.7.0 and ChildBrowser.
NOTE: The ChildBrowser plugin was upgraded when PhoneGap went to Cordova. These notes will not work with Cordova versions of PhoneGap.
I followed the steps as in the following link, using the same name as my old project, but putting it in a new folder:
http://docs.phonegap.com/en/1.7.0/guide_getting-started_ios_index.md.html#Getting%20Started%20with%20iOS
I built the new project and ran it in my iPod touch. The home page screen showed up as in the clearly written instructions.
I dragged my 1.0.0 project’s files and folders to the new www folder from within Finder. I opened the old project’s index.html file to reference the cordova-1.7.0.js in the header.
I then went to download the latest iOS version of ChildBrowser plugin at:
https://github.com/phonegap/phonegap-plugins
(I don’t see this link on the phonegap.com website among the links at bottom. I got it from my website links page.)
The download file was installed on my system at Downloads/phonegap-phonegap-plugins=a12dd40. From its iOS/ChildBrowser folder I copied the ChildBrowser.js file to the new project’s www folder from within Finder, then opened the new project in Xcode and dragged the .h, .m, .bundle, and .xib files into the Plugins folder in Xcode. I deleted the README text file in Plugins.
I opened the old project in its own Xcode window and set the two Xcode windows side by side. I deleted the icons and splash images from the new project and dragged the old project’s images over to replace them.
In the new project’s Xcode window, I opened Cordova.plist and added the ChildBrowserCommand text to the Plugins section as key and value. (You can see a screenshot of this entry in the Cordova.plist.png image they had thoughtfully included in the ChildBrowser folder. See it below.) Also, for External Hosts, I started a new line, with Item 0 as key at left and * as the value at right (just an asterisk) to allow all URLs.
Make these entries.
I copied and pasted the following to the index.html page as noted in the Childbrowser README.md:
function onDeviceReady() {
var root = this;
cb = window.plugins.childBrowser;if(cb != null) {
cb.onLocationChange = function(loc){ root.locChanged(loc); };
cb.onClose = function(){root.onCloseBrowser(); };
cb.onOpenExternal = function(){root.onOpenExternal(); };
cb.showWebPage(“http://google.com”);
}
}function onCloseBrowser() {
console.log(“onCloseBrowser!”);
}function locChanged(loc) {
console.log(“locChanged!”);
}function onOpenExternal() {
alert(“onOpenExternal!”);
}
In addition, right after the line, function onDeviceReady() {, I added the following line:
childbrowser = ChildBrowser.install();
Also, I commented out one of the lines above so it reads:
// cb.showWebPage(“http://google.com”);
Get the above process rolling by changing your <body> tag to:
<body onLoad=”onBodyLoad()”>
I needed to change all my external links to this format before they worked:
<li><a href=”#” onclick=’cb.showWebPage(“http://www.the_site_here.com”);’>row label text here</a></li>
Go ahead and test.
You might get the notice in your log pane in Xcode: “Error: executing module function ‘setInfo’ in module ‘cordova/plugin/ios/device’. Have you included the iOS version of the cordova-1.7.0.js file?”
I made sure the cordova-1.7.0.js file was iOS by doing a word search of the file. “iOS” is matched 47 times, and it is not commented out, so this is indeed the iOS version. According to the following link, it’s not an error, and can be safely ignored:
https://groups.google.com/forum/?fromgroups#!topic/phonegap/jXPfFsEtxMs (April 19 post).
At this point, Childbrowser is working with Cordova 1.7.0 in Xcode 4.3.2 on Mac OSX Lion. It slides up when I tap on an external link, and the Done button brings me back to my app.
Since I had only a few external links, this was satisfactory. However, my older version would have allowed me to retain my links as is (without the addition of “cb.showWebPage” to them). I’m looking for ways to modify the code to leave the links untouched. I have a few projects with many links and I don’t look forward to changing all of those.
iPhone Dev Log 
Pingback: Installing ChildBrowser into Xcode 4 with PhoneGap 1.0 (Mac OS X, Snow Leopard) | iPhone Dev Log
Thank you for the tutorial.
Do you know whether this steps are still valid with PhoneGap 2.0 (and XCode 4.4.1)?
I followed your steps, but it is not working for me. I am not getting any erros, but when I click on the link nothing happens…
I don’t know if the instructions are the same. I suggest joining the Google group PhoneGap and doing a search for childbrowser for any updates.
Do you have to put “cb.showWebPage” on every link?
No, that code is only for the index.html page. My links are ordinary HTML URLs.
Pingback: Installing the SLQite Plugin into Cordova 2.1.0 in iOS | iPhone Dev Log
Steve I have been struggling with making CB just open all links. I have an iframe, an RSS feed being shown on a page(zRSSFeed), etc. Changing those links to use CB is not doable. Apple has rejected my app and one reason is that these previously mentioned pages are opening links in Safari. I found some code that changed MainViewController.m and that made my iFrame open when the app loaded. I tried a .bind(‘click’) to the jquery mobile page’s class, but that only opens the url I put in the function linked to click.
Ugh!
I’m so stuck.
I’m not experienced enough to help you here. Perhaps others coming will be able to pass on some advice.
these steps work for Cordova 2.2 in ios. The only detail I would add is that there is a small arrow next to external hosts in the plist. When it is not pointing down, the plist will seem to add an item and it won’t work. The way to tell if you’ve got it right is that the array in the right column of external hosts will show (1 item) rather than 0.