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

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&#8221;);

}

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.

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

Google+ photo

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

Connecting to %s

%d bloggers like this: