Default ChildBrowser Plugin Example for PhoneGap: Successfully Opens, But Fails to Load URL

Question

I'm hoping this is a pretty easy question to answer, as I seem to be very close to getting the ChildBrowser plugin working. I'm using Xcode 4.6.2 and Cordova 2.7.0, attempting to create a basic iPhone app that runs the generic ChildBrowser example.

Overview

Let me retrace my steps so far:

1) Downloaded the ChildBrowser plugin from here: https://github.com/phonegap/phonegap-plugins/tree/master/iOS/ChildBrowser
2) Copied all the .xib, .h, and .m files to the Plugins folder.
3) Copied the ChildBrowser.js and index.html files to the www folder.
4) Copied the ChildBrowser.bundle to the Frameworks folder.
5) Modified the plugins node in config.xml, so that it includes:

 <plugin name="ChildBrowserCommand" value="ChildBrowserCommand" />

6) On running the default ChildBrowser example, I saw a console warning noting that the button code was deprecated. So I changed this line:

<button onclick="cb.showWebPage('http://google.com');">Click to open ChildBrowser!</button>

to this:

<button onclick="cordova.exec(null, null, 'ChildBrowserCommand', 'showWebPage',['http://www.google.com']);">Click to open ChildBrowser!</button>

Summary

I'm able to build the app without any issues, and when I test it using the iOS Simulator (iPhone 6.1), it seems to almost work. Clicking the button does trigger ChildBrowser and I can see all the UI elements at the bottom of the screen. But instead of loading up Google's homepage, I just see "Loading..." and a spinner.

When checking the console, this is the info I'm getting:

2013-05-15 06:01:34.934 HelloWorld[23234:c07] View did load
2013-05-15 06:01:34.936 HelloWorld[23234:c07] Opening Url : INVALID

It feels close! But for whatever reason, the URL isn't valid? Not sure if I've missed a step, or if I've done something wrong in the setup process. I can pull up Google just fine using Safari in the simulator, so I know it's not a connection issue.

Any help or insight greatly appreciated. I've tried looking all over for solutions, and haven't found anything yet. Given how close I am with this, it seems like I'm overlooking something really small?

Cheers!

score 4 · Accepted Answer · answered May 16 '13 at 05:43

4

you should use the InAppBrowser plugin that comes standard with phonegap introduced in 2.3.0 example:

var ref = window.open('http://apache.org', '_blank', 'location=yes');

details at phonegap docs here

answered May 16 '13 at 05:43

Clinton Ward

2,441
1
22
26

Thanks, Clinton. I know of InAppBrowser, but thought that it didn't necessarily negate ChildBrowser (based on [this post by Shazron](http://shazronatadobe.wordpress.com/2012/11/21/inappbrowser-based-on-childbrowser-in-cordova-2-3-0/). But is the general thought that ChildBrowser is an old/outdate plugin? I'd still be curious to know what else I need to do, to get ChildBrowser working. If nothing else, just to get more familiar with how to properly add a PhoneGap plugin. – avoision May 16 '13 at 19:32
2

as fas as I know child browser is not used. So it think the plugin is not generally kept up to date. If you want to learn how to use plugins you should look at some updated plugins that are still in use. – Clinton Ward May 17 '13 at 03:01
Guess IAB is the way to go. Thanks, Clinton! – avoision May 17 '13 at 03:44

score 0 · Answer 2 · edited May 10 '16 at 18:40

Although ChildBrowser isn't being used/supported anymore. I have a tutorial on my blog on how to install child browser (https://neilbo21.wordpress.com/2013/10/07/how-i-make-web-apps-for-ios-phonegap-xcode-bonus-childbrowser-video/)

So you will need to download the ChildBrowser Plugin Files from https://github.com/phonegap/phonegap-plugins/tree/master/iOS/ChildBrowser. Copy the files into your Plugins Folder and make sure you set your targets in Xcode by dragging the items to the Plugins folder in your Xcode Project:

ChildBrowser.bundle
ChildBrowserCommand.h
ChildBrowserCommand.m
ChildBrowserViewController.h
ChildBrowserViewController.m
ChildBrowserViewController.xib

Copy ChildBrowser.js file into your www folder

Go to your Cordova.plist > Expand the Plugins Key > press the plus (+) symbol add the ChildBrowserCommand as Key, Type as String, Value as ChildBrowserCommand.

Reference the ChildBrowser.js in your index.html

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

To make ChildBrowser Functions Call

<script type="text/javascript">


        //ChildBrowser js calls
        document.addEventListener("deviceready", loaded, false);

        function loaded()
        {
            if (console)
            {
                console.log("cordova loaded");
            }
        }

        function openGoogle()
        {
            if (console)
            {
                console.log("in show pmt page");
            }

            Cordova.exec("ChildBrowserCommand.showWebPage", "http://www.google.com/" );
        }

</script>

Now you are ready to call your javascript function that will open Google in ChildBrowser.

<a href="#" onclick="openGoogle();">Search Google</a>

Default ChildBrowser Plugin Example for PhoneGap: Successfully Opens, But Fails to Load URL

Overview

Summary

2 Answers2