alunny / childbrowser

cross-platform ChildBrowser plugin for PhoneGap/Cordova

ChildBrowser plugin for PhoneGap

Important Note

I (@alunny) am no longer working on this project, and no longer on PhoneGap Build. If you would like changes to get into PhoneGap Build's version of this plugin, please see https://github.com/phonegap-build/ChildBrowser

Old README

This is a prototype of a cross-platform ChildBrowser PhoneGap plugin. Android and iOS are currently supported. Support for BlackBerry and Windows Phone is also planned.

The goal is for a single JavaScript file to be usable on all supported platforms, and the native code to be installed in a project through a separate script.

The Structure

plugin.xml
-- src
  -- android
    -- ChildBrowser.java
  -- ios
    -- ChildBrowser.bundle
      -- arrow_left.png
      -- [email protected]
      -- ...
    -- ChildBrowserCommand.h
    -- ChildBrowserCommand.m
    -- etc
-- www
  -- childbrowser.js
  -- childbrowser
    -- icon_arrow_left.png
    -- icon_arrow_right.png
    -- ...

plugin.xml

The plugin.xml file is loosely based on the W3C's Widget Config spec.

It is in XML to facilitate transfer of nodes from this cross platform manifest to native XML manifests (AndroidManifest.xml, App-Info.plist, config.xml (BB)).

A specification for this file format will be forthcoming once more feedback has been received, and the tooling around plugin installation is more mature.

ChildBrowser JavaScript API

As with most Cordova/PhoneGap APIs, functionality is not available until the deviceready event has fired on the document. The childbrowser.js file should be included after the phonegap.js file.

All functions are called on the singleton ChildBrowser instance - accessible as window.plugins.childBrowser.

Methods

showWebPage

showWebPage(url, [options])

Displays a new ChildBrowser with the specified URL. Defaults to true.

Available options:

• showLocationBar (Android and iOS): show/hide a location bar in the generated browser
• showAddress (Android and iOS): show/hide the address bar in the generated browser
• showNavigationBar (Android and IOS): show/hide the entire navigation bar. Important: since there is no "Done"-Button anymore, the ChildBrowser can only be closed with the api call close() (see below).

Example:

window.plugins.childBrowser.showWebPage('http://www.google.com',
                                        { showLocationBar: true });

close

close()

Closes the ChildBrowser.

Example:

window.plugins.childBrowser.close();

openExternal

openExternal(url, usePhoneGap)

(Android only) Opens the URL in a regular browser - if usePhoneGap, that browser will be a PhoneGap-enabled webview

Example:

window.plugins.childBrowser.openExternal('http://www.google.com');

Events

All events can be subscribed to by assigning a function to window.plugins.childBrowser['on' + eventName]; see examples below

close

Called when the ChildBrowser has been closed

Example:

window.plugins.childBrowser.onClose = function () {
    alert('childBrowser has closed');
};

locationChange

Called when the ChildBrowser loads a URL (including the initial location, when showWebPage is called). The callback function is passed the new URL being loaded.

Example:

window.plugins.childBrowser.onLocationChange = function (url) {
    alert('childBrowser has loaded ' + url);
};

openExternal

(iOS only) Called when the user opts to load an app in the device's browser (exiting the PhoneGap app in the process).

Example:

window.plugins.childBrowser.onOpenExternal = function () {
    alert('opening Mobile Safari');
};

Thank you GitHub People

• @RandyMcMillan
• @reinberger
• @yimingkuan

License

MIT License (2008). See http://opensource.org/licenses/alphabetical for full text.

Copyright 2012, Andrew Lunny, Adobe Systems

Copyright (c) 2005-2010, Nitobi Software Inc.

Copyright (c) 2011, IBM Corporation

Copyright (c) 2010 Jesse MacFadyen, Nitobi

Copyright (c) 2012 Randy McMillan

childbrowser's Issues

plugins.cordova.io will be deprecated in the near future

according to this
http://phonegap.com/blog/2015/05/26/npm-plugins-available/
http://cordova.apache.org/announcements/2015/04/21/plugins-release-and-move-to-npm.html

so...just want to inform you that your plugin should be move to npm in the future...

ChildBrowser + PhoneGap Hydra = Missing location bar Images

When you use PhoneGap Build Hydra, the ChildBrowser looks in the assets/www folder for the childbrowser folder and it's images Hydra, however, downloads the files separately and stores them in a different directory. When it runs, you just get three small boxes, that are thankfully clickable.

broken as of incubator-cordova-ios d8575d7ee, needs screen orientation api updates

https://github.com/apache/incubator-cordova-ios/commit/d8575d7eece28ec2c90de4b448af729accaf2567 added new semantics for screen orientation and broke childbrowser

cc @shazron

Request: Hide/Show specific buttons in navigation bar

I have a request: could someone add the functionality to show/hide the different buttons in the navigation bar? What I'm currently interested into is to only have the "Done" button shown, I don't need the other buttons and would prefer them to be hidden to avoid user's confusion.

I'm using that plugin throw PhoneGap Build and currently don't know anything about Java or objective C...

[ios] configure location bar

hide/display individual buttons

show title/header bar in childBrowser,phonegap,android

I am using childBrowser which works fine to display external web pages within my PhoneGap application.My problem is i am not able to add title/header in child web pages. Any suggestions ?

[ios] configure location bar

hide/display individual buttons

Update Icons Used By Childbrowser

Is there anyway we can update the icons used by ChildBrowser on Android when utilizing build? I have included my own childbrowser directory with icons to use, but they are not utilized.

When viewing on android the buttons are light gray with then white icons on them. They are nearly invisible.

Cordova 2.2 - CDVPlugin class childbrowser.js (pluginName: ChildBrowser) does not exist.

This will be Day 2 of trying to get this thing to work.
First off, I have to say that the instructions for installation of this plugin are scattered all over the place. It would be nice if the developer would kindly consolidate and give us an official installation procedure guide that is reproducible 100% of the time.

I have tried creating a Cordova project per the Cordova guide (go to the ios/bin folder, ./create, etc), and launching the Cordova app doesn't seem to be at issue, here. However, I have tried following what scattered instructions I could find, and this is what I /think/ the procedure is supposed to be:

1. Open your XCode project.
2. Drag and drop all the library files from the ChildBrowser-master/src/ios folder onto the Plugins folder of your XCode project's structure.
3. Check the "Copy items into destination group's folder (if needed)" box, and leave
   Create folder references for any added folders" selected by default, and click Finish.
4. To the Cordova.plist file, under the ExternalHosts item, add a url to whitelist (in this case *)
5. To the Cordova.plist file, under Plugins, add two items:
   * ChildBrowser (string) childbrowser.js
   * ChildBrowserCommand (string) ChildBrowserCommand
6. Add to your index.html file a script reference to childbrowser.js, after your script include of cordova.
7. Copy (in the Finder) childbrowser.js from the ChildBrowser-master/www folder to the www folder of your project.
8. Add a link to your index.html file. In my case, for testing purposes, I added <a href="#" id="btnTest">Test Link</a>
9. In the js/index.js file that comes from the base ./create of the project, I added:

onDeviceReady: function() {
        app.receivedEvent('deviceready');
        var link = document.getElementById("btnTest");
        link.addEventListener('click', function() {
                console.log('Link clicked!');
                window.plugins.childBrowser.openExternal('http://www.apple.com');
                });
        },

I Run the Emulator, and I can see that the click event is being hit, in the console. However, after that, I get the following errors:

2012-11-20 10:02:58.114 testCB21[5047:c07] CDVPlugin class childbrowser.js (pluginName: ChildBrowser) does not exist.
2012-11-20 10:02:58.115 testCB21[5047:c07] ERROR: Plugin 'ChildBrowser' not found, or is not a CDVPlugin. Check your plugin mapping in Cordova.plist.
2012-11-20 10:02:58.116 testCB21[5047:c07] FAILED pluginJSON = ["INVALID","ChildBrowser","openExternal",["http://www.apple.com",null]]

I'm at wits' end, here... what am I screwing up, or not seeing? Obviously, other people seem to be able to get this to work, so what am I missing?

I'm using XCode 4.5.2, targeting iOS 6.0 (I've tried 5.1 as well, and no difference). I've also tried the advice that someone else here gave of having my plugin reference ChildBrowser (string) ChildBrowserCommand and that doesn't do anything different, either.

Any leads on this would be most gratefully welcome!

crossplatform git checkout not compatible with cordova 2.1

Hi,

I followed the guide on http://www.youtube.com/watch?v=HOs9nuzhxR4&feature=youtu.be but cannot get the CrossPlatform version to work on Android (I haven't tried iOS yet).

I'm using cordova-2.1.js, which is structured differently than the classes you are referencing in the plugin. I already tried chaning the imports to import org.apache.cordova.api.*; instead of the com.phonegap.api urls, but to no avail.

Errors start at "com.phonegap.DroidGap cannot be resolved to a type" to "ctx. cannot be resolved"
Is there an easy way to fix this?

Thank you

pluginstall plugin.xml

While installing via pluginstall I figured out 2 problems:

• (android) " " symbols are inserted inside XML files
• (ios) my project will look for files in folder Plugins/Plugins instead of simple Plugins

this on Mac OS X Lion

Not sure if the issue is related to this plugin or probably to pluginstall itself

plugin does not work with PDF's on an Android

Has anyone succesfully gotten this to work, a PDF on an Android. specifically a local PDF, not a web url ?
It works fine on iOS but Android it is just a blank screen.
Thanks

ld: symbol(s) not found for architecture arm64 cordova ios xcode 8.2

Hi

I got 64-bit error when i tried to submit app to appstore

"iTunes Store operation failed.
Missing 64-bit support. iOS apps submitted to the App Store must include 64-bit support and be built with the iOS 8 SDK or later. We recommend using the default "Standard Architectures" build setting for "Architectures" in Xcode, to build a single binary with both 32-bit and 64-bit support."

then i added the arm64 to valid Architecture, after that i m getting below error and not able to solve

please help regarding this

Undefined symbols for architecture arm64:
"OBJC_CLASS$_CDVPluginResult", referenced from:
objc-class-ref in socialShare.o
"OBJC_CLASS$_ZBarReaderViewController", referenced from:
objc-class-ref in ChildBrowserCommand.o
"OBJC_CLASS$_CDVViewController", referenced from:
OBJC_CLASS$_MainViewController in MainViewController.o
"OBJC_CLASS$_GAI", referenced from:
objc-class-ref in GoogleAnalyticsPlugin.o
"OBJC_CLASS$_CDVPlugin", referenced from:
OBJC_CLASS$_GoogleAnalyticsPlugin in GoogleAnalyticsPlugin.o
OBJC_CLASS$_ChildBrowserCommand in ChildBrowserCommand.o
OBJC_CLASS$_socialShare in socialShare.o
"_ZBarReaderControllerResults", referenced from:
-[ChildBrowserCommand imagePickerController:didFinishPickingMediaWithInfo:] in ChildBrowserCommand.o
"OBJC_METACLASS$_CDVViewController", referenced from:
OBJC_METACLASS$_MainViewController in MainViewController.o
"OBJC_METACLASS$_CDVPlugin", referenced from:
OBJC_METACLASS$_GoogleAnalyticsPlugin in GoogleAnalyticsPlugin.o
OBJC_METACLASS$_ChildBrowserCommand in ChildBrowserCommand.o
OBJC_METACLASS$_socialShare in socialShare.o
ld: symbol(s) not found for architecture arm64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

Really works in PhoneGap 2.1?

Does really anybody have this working in PG 2.1?
I get undefined on window.plugins ... and when looking at childbrowser.js it still uses addConstructor which is (AFAIK) deprecated...

Hm.

childbrowser won't open after close a first one

Hi All,

I have some trouble with childbrowser.
Actually i want open a new window after i have closed a first one but...
WebKit discarded an uncaught exception in the webView:decidePolicyForNavigationAction:request:frame:decisionListener: delegate: Application tried to present modally an active controller

Do you have an idea please?

Here is my sample code:

cb.showWebPage(link);
cb.onLocationChange = function(){
cb.close();
}
cb.onClose = function(){
cb.showWebPage(link2);
}

Support for Windows 10

Hi,

Will this support for windows 10 uwp application ?

Regards,
Yash

Android- How to get device backbutton event in childBrowser plugin

Hi,
I am facing an issue such that whenever i press the android back button ; the browser closes . Is there any way to restrict from closing the app as we need to use only the close button of the childbrowser

Support for cordova-cli - cordova plugin add

Currently, when attempting to install Childbrowser with the command:

cordova plugin add https://github.com/alunny/ChildBrowser.git

I get the following error:

[Error: grafting xml at selector "/cordova/plugins" from "/Users/mattgaunt/Programming/Workspace/device-lab-mobile/platforms/android/res/xml/config.xml" during config install went bad :(]

ChildBrowser plugin not supporting for 64-bit architecture

Giving below error

"_ZBarReaderControllerResults", referenced from:
-[ChildBrowserCommand imagePickerController:didFinishPickingMediaWithInfo:] in ChildBrowserCommand.o"

closing childbrowser causes 1/3rd of screen to be black in landscape mode on an iPad

when closing the childbrowser a large portion on the right side of the landscape screen is left black, which resizes/crops the underlying phonegap app.

Multiple requests per child browser instance

It would be nice to be able to make subsequent url requests to the same child browser. At the moment I am using the
showWebPage function to open the child browser and show an initial web page. My code listens to the onLocationChange event and checks the new url to decide which subsquent url I need to display. The only way I currently know how to show subsquent url's is to close the initial child browser and then call showWebPage again, it would be nice if multiple requests could be achieved in one instance.

If I was to implement t he iOS and Android code, would this be something you would consider adding into the source? Also how quickly would that source be integrated into the Phone Gap Build version of the child browser?

https://issues.apache.org/jira/browse/CB-608

https://issues.apache.org/jira/browse/CB-608

Ill have some questions. Just making a place for the discussion.

Cordova 2.2.0

Got following compile error

Undefined symbols for architecture i386:
  "_OBJC_CLASS_$_CDVPlugin", referenced from:
      _OBJC_CLASS_$_ChildBrowserCommand in ChildBrowserCommand.o
  "_OBJC_CLASS_$_CDVPluginResult", referenced from:
      objc-class-ref in ChildBrowserCommand.o
  "_OBJC_CLASS_$_CDVViewController", referenced from:
      _OBJC_CLASS_$_MainViewController in MainViewController.o
  "_OBJC_METACLASS_$_CDVPlugin", referenced from:
      _OBJC_METACLASS_$_ChildBrowserCommand in ChildBrowserCommand.o
  "_OBJC_METACLASS_$_CDVViewController", referenced from:
      _OBJC_METACLASS_$_MainViewController in MainViewController.o
ld: symbol(s) not found for architecture i386
clang: error: linker command failed with exit code 1 (use -v to see invocation)

add blackberry support

depends on BB support in pluginstall

Blank screen when swipe left Ipad

When i swipe left from the ipad am getting blank screen. I have to close the application and open it again to view the page. It works fine on android.

Build error "'PGPlugin.h' file not found"

I've got an error during build process: "'PGPlugin.h' file not found" in ChildBrowserCommand.h file.

I am using phonegap 2.0.0 with xcode 4.4.1.
I've done installation process of the plugin with the help of pluginstall.

Missing semi colon

:-D
Line 60 of childbrowser.js

TypeError: gap is undefined

Not sure if this is an issue but on cordova 2.0 when listing in head section

<script charset="utf-8" src="js/childbrowser.js"> getting error on : gap.addConstructor(function () {} childbrowser.js (line 102)