Implementing ChildBrowser plugin in PhoneGap for Android and iOS platforms

Posted By : Pawanpreet Singh | 22-Oct-2012

Chilbrowser android ios phonegap

In one of my recent PhoneGap mobile project I needed to open an external link in my app for this I used the child browser plugin. It allows app to display external web pages within the PhoneGap without exiting your app to view the link.It creates a popup browser that is shown in front of the app ,when the user presses the back button they are simply returned to the app.I am going to share the integration process of the ChildBrowser plugin in the PhoneGap app in Android and iOS platforms.

Getting Started:

Following steps are for Phonegap 2.1

Android

Step 1. Download the plugin from GIT.(You need GIT client to follow the further steps you can download the GIT client from their site http://www.github.com and while installing select the checkbox of commandline) after installation follow the below described steps.

  • Goto command prompt or terminal select the directory where you want the content of the repo using cd command.
  • Type following command:
		git clone https://github.com/phonegap/phonegap-plugins

it will download all the set of plugins supported by PhoneGap

Step 2. Create a Basic PhoneGap app(You can view my other blog for further assistance).

Step 3. From the Downloaded set of plugin move to Android directory then select ChildBrowser and move in it then to the directory named 2.0.0 there will be two directories named src and www.

Step 4. Copy the content of the src folder from downloaded plugins to your projects src folder.

Step 5. Copy the content of the www folder from the downloaded plugins to you projects assets/www folder.

Step 6. In your project res/xml/config.xml file add the following line as a child to the plugin tag:

<plugin name="ChildBrowser" value="com.phonegap.plugins.childBrowser.ChildBrowser"/>

Step 7. In the file index.html in the assets/www directory Replace the content with the described below.


<!DOCTYPE HTML>
<html>
	<head>
		<title>ChildBrowser</title>
		<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
		<script type="text/javascript" charset="utf-8" src="childbrowser.js"></script>
		<script>
			function onBodyLoad()
			{		
				document.addEventListener("deviceready", onDeviceReady, false);
			}
			function onDeviceReady()
			{
        			cb = window.plugins.childBrowser;
			}
		</script>
	</head>
	<body onload="onBodyLoad();">
		<p>click the button to open Oodles Technologies WebSite in ChildBrowser</p>
		<button onclick="cb.showWebPage('http://www.oodlestechnologies.com')">click</button>
	</body>
</html>

Step 8. Run the app.

 

iOS

 

Step 1. Download the plugin from GIT.(You need GIT client to follow the further steps you can download the GIT client from their site http://www.github.com and while installing select the checkbox of commandline) after installation follow the below described steps.

  • Goto command prompt or terminal select the directory where you want the content of the repo using cd command.
  • Type following command:
		git clone https://github.com/phonegap/phonegap-plugins

it will download all the set of plugins supported by PhoneGap

Step 2. Create a Basic PhoneGap app(You can view my other blog for further assistance).

Step 3. From the Downloaded set of plugin move to iOS directory then select ChildBrowser and move in it there you will find various files related to the plugin.

Step 4. Drag all of the .m and .h files from the ChildBrowser folder to the Plugins folder of your project when prompted select "Create folder references for added folders" and "copy item into destination group's folder(if needed)" options.

Step 5. Drag the .bundle and .xib files from the ChildBrowser folder to the Resources folder of your project.

Step 6. In the Resources folder of your Project you will find a file named Cordova.plist in it you will find a bunch of key/value pairs,In the Plugins category add a key ChildBrowserCommand and Value ChildBrowserCommand (as shown below).

View of plugin and externalhosts in cordova.plist

 

Step 7. In the same file stated above you will find a category named ExternalHosts add the name of website you want to open using ChildBrowser or you can simply add * so that it can access all sites (as shown above).

 

Step 8. Copy ChildBrowser.js from the ChildBrowser folder to the www folder of your project.

Step 9. In the file index.html in the www directory Replace the content with the described below.


<!DOCTYPE HTML>
<html>
	<head>
		<title>ChildBrowser</title>
		<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
		<script type="text/javascript" charset="utf-8" src="ChildBrowser.js"></script>
		<script>
			function onBodyLoad()
			{		
				document.addEventListener("deviceready", onDeviceReady, false);
			}
			function onDeviceReady()
			{
        			cb = window.plugins.childBrowser;
			}
		</script>
	</head>
	<body onload="onBodyLoad();">
		<p>click the button to open Oodles Technologies WebSite in ChildBrowser</p>
		<button onclick="cb.showWebPage('http://www.oodlestechnologies.com')">click</button>
	</body>
</html>

Step 10. Run the App.

About Author

Author Image
Pawanpreet Singh

Pawanpreet is an seasoned Project Manager with a wealth of knowledge in software development, specializing in frontend and mobile applications. He possesses a strong command of project management tools, including Jira, Trello, and others. With a proven track record, he has successfully overseen the delivery of multiple software development projects, managing budgets and large teams. Notable projects he has contributed to include TimeForge, Yogyata, Kairos, Veto, Inspirien App, and more. Pawanpreet excels in developing and maintaining project plans, schedules, and budgets, ensuring timely delivery while staying within allocated resources. He collaborates closely with clients to define project scope and requirements, establish timelines and milestones, and effectively manage expectations. Regular project status meetings are conducted by him, providing clients and stakeholders with consistent updates on project progress, risks, and issues. Additionally, he coaches and mentors project leads, offering guidance on project management best practices and supporting their professional development.

Request for Proposal

Name is required

Comment is required

Sending message..