ChildBrowser phone call not working
After looking for a suitable way to open the browser in my application, I stumbled upon ChildBrowser, which looked like it offered everything after. After a few tutorials, I can't seem to get the plugin to work. I edited my PhoneGap.plist file for external hosts with the value "*", I added ChildBrowserCommand to the plugins, but when I run the application, nothing happens when I click the link. I have the following code at the beginning of my document;
<script type="text/javascript">
var childBrowser;
function onBodyLoad ()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
//Phonegap ready to go
function onDeviceReady()
{
alert("PhoneGap is ready");
childBrowser = ChildBrowser.install();
}
function openChildBrowser(url)
{
try {
window.plugins.childBrowser.ShowWebPage(url);
//childBrowser.showWebPage(url);
}
cathc(err)
{
alert(err);
}
}
</script>
I have a ChildBrowser included right after my phoneGap.js file, but cannot get it to start, and I am not getting any errors logged in the console. Does anyone know what is wrong or at least point me in the right direction?
source to share
After spending hours / days chasing many confusing pages on this topic, I finally found a concise set of instructions on this page. Don't forget to grab the latest code as shown on this github page . I was able to get the ChildBrowser plugin to work with PhoneGap 1.5.0 in Xcode 4.3 running on OSX 10.7.3 and tested on iOS 4 and 5. The limitation I found is that it only works in portrait mode. Now I am pursuing a solution to enable landscape mode.
source to share
This code below works for me.
<!DOCTYPE html>
<html>
<head>
<title>My External Page</title>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1.0"/>
<meta name="format-detection" content="telephone=no"/>
<!--iPhone on Safari Standalone mode-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--Hide iPhone on Safari Native Top Status Bar-->
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="cordova-2.1.0.js"></script>
<script type="text/javascript" src="childbrowser.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", loaded, false);
function loaded()
{
if (console)
{
console.log("cordova loaded");
}
}
function showExternalPage()
{
if (console)
{
console.log("in show pmt page");
}
Cordova.exec("ChildBrowserCommand.showWebPage", "http://www.google.com/" );
}
</script>
</head>
<body>
<div data-role="page" id="myExternalLauncherPage" data-theme="a">
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li>
<button type="submit" data-theme="b" id="launcherButton" onclick="showExternalPage()">Launch Google</button>
</li>
</ul>
</div>
</div>
</body>
source to share