Home > Uncategorized > ChildBrowser plugin with Cordova 1.7.0

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


4. Now it gets hairy – When compiling, it said that CDVPlugin.h was not found, so I hacked this into the ChildBrowserCommand.h file:



#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>



<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()




function myLocationChange(loc)


alert(“GOT URL:” + loc);




<body onload=”onBodyLoad()”>

Loading Google…



Once again, I’m not recommending this approach, but it worked for me.

Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: