ChildBrowser plugin with Cordova 1.7.0
I wanted to use the ChildBrowser plugin with Cordova 1.7.0, so that I could capture url change events when a user navigated from page to page within an iPhone app. It took me about an hour to get working, and I’m not sure if I’d recommend the approach I used, but it here it is, warts and all.
1. Downloaded the ChildBrowser plugin from GitHub, (https://github.com/purplecabbage/phonegap-plugins/tree/master/iPhone/ChildBrowser) – added everything apart from the js file into the Plugins folder.
2. Added the ChildBrowser.js file into the www folder.
3. As per the screenshot below, I added * into the External Hosts, and ChildBrowserCommand into the Plugins dictionary in Cordova.plist
3. 
4. Now it gets hairy – When compiling, it said that CDVPlugin.h was not found, so I hacked this into the ChildBrowserCommand.h file:
#define CORDOVA_FRAMEWORK
#ifdef CORDOVA_FRAMEWORK
#import “CDVPlugin.h”
5. Using code examples online, I could not get ChildBrowser.install() to return anything but null, until I realized that simply including ChildBrowser.js, it was installing itself automatically.
6. Next problem was, that supposedly _onlocationchange(loc) was supposed to fire on new pages, but it wasn’t, so I decided to hack this into onChildLocationChange in ChildBrowserCommand.m
//NSString* jsCallback = [NSString stringWithFormat:@”ChildBrowser._onLocationChange(‘%@’);”,encUrl];
NSString* jsCallback = [NSString stringWithFormat:@”myLocationChange(‘%@’);”,encUrl];
Then, instead of calling ChildBrowser._onLocationChange, it would call myLocationChange
And the final frankenstein-monstrosity (ugly, but working) in HTML was:
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;” />
<meta charset=”utf-8″>
<script type=”text/javascript” charset=”utf-8″ src=”cordova-1.7.0.js”></script>
<script type=”text/javascript” charset=”utf-8″ src=”ChildBrowser.js”></script>
<script type=”text/javascript”>
function onBodyLoad()
{
document.addEventListener(“deviceready”, onDeviceReady, false);
}
function onDeviceReady()
{
window.plugins.childBrowser.showWebPage(“http://google.com”);
}
function myLocationChange(loc)
{
alert(“GOT URL:” + loc);
}
</script>
</head>
<body onload=”onBodyLoad()”>
Loading Google…
</body>
</html>
Once again, I’m not recommending this approach, but it worked for me.
