How to use childBrowser for phonegap app

Question

I need to display a webpage in my phonegap app and be able to apply a neww css file that will override the display - or maybe there is a different way to do it without css?

I know that this has to be possible because if I open the webpage on my desktop with mozilla I can tweak the css using firebug to get the look i want. I cant use an iframe because the only change i need to make is to the dimensions. I need to shrink it down a bit because I dont want to have to scroll in the mobile app. Here is the code I have a feeling that this still may not work as i think im supposed to enable flash (the page im trying to load is a live stream) but i want to see what these changes do first

index.html:

<!DOCTYPE html>
<html>
<head>
<title>Hello Phonegap</title>

    <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="phonegap.js"></script>
    <script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="theme.css" />
    <link rel="stylesheet" href="theme.min.css" />
    <script type="text/javascript" charset="utf-8" src="childbrowser.js"></script>
    <script type="text/javascript">




   function onBodyLoad()
    {       
        document.addEventListener("deviceready", onDeviceReady, false);
    }

    function onDeviceReady()
    {
        // do your thing!
        navigator.notification.alert("Phonegap is ready")
    }

    </script>
<link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css">
</head>
<body onload="onBodyLoad()">
    <!-- Home -->
<div data-role="page" id="page1">
        <div data-role="content">
          <ul class="ui-btn-up-a" data-role="listview" data-theme="a">
            <li><a href="#">Page</a></li>
            <li><a href="#">Page</a></li>
            <li><a href="#">Page</a></li>
            <li class="ui-bar-a"><a href="#" onClick= "window.plugins.childBrowser.showWebPage('http://www.google.com');">child</a></li>
          </ul>

        </div>

    </div>
  </div>

config.xml

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id        = "com.phonegap.example"
version   = "1.0.0">

<name>PhoneGap Build Application</name>

<description>
A simple PhoneGap Build application.
</description>

<author href="https://example.com" email="you@example.com">
Your Name
</author>
<gap:plugin name="ChildBrowser" />
<access origin="*" />

</widget>

Im getting ready to hang it up lol. Any help would be awesome! — NeoDroid, Sep 29 '12 at 23:06
So have you tried sizing the element that contains the childBrowser with css? — Owlvark, Sep 30 '12 at 00:53
no i havent but would that work? I need to alter the size of the webpage being viewed within the childbrowser. i know IE has a zoom property for iframes is their anything similiar to that? — NeoDroid, Sep 30 '12 at 01:47
Try it, but as you know you can't change things in 3rd party iframes, which I suspect is what's happening here. — Owlvark, Sep 30 '12 at 02:12

score 0 · Answer 1 · answered Mar 28 '13 at 20:40

to add a new css file use the following:

var obj=document.createElement("link");
obj.setAttribute("rel", "stylesheet")
obj.setAttribute("type", "text/css")
obj.setAttribute("href", your_css_file)
obj.setAttribute("id", id_to_remove_it_later);
document.getElementsByTagName("head")[0].appendChild(obj);

hope it helps

score 0 · Answer 2 · answered Jul 16 '14 at 09:07

in you res/config.xml

you must add new feature

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

and remove <gap:plugin name="ChildBrowser" />

you can test in this code (HTML)

<div onclick='window.plugins.childBrowser.showWebPage("http://cran.r-project.org/doc/manuals/R-intro.pdf",
{ showLocationBar: true, showNavigationBar: true, showAddress: true});'><b>test222</b></div>   

<div onclick='window.plugins.childBrowser.showWebPage("http://cran.r-project.org/doc/manuals/R-intro.pdf",
{ showLocationBar: true, showNavigationBar: true, showAddress: false});'><b>test222</b></div>   

<div onclick='window.plugins.childBrowser.showWebPage("http://cran.r-project.org/doc/manuals/R-intro.pdf",
{ showLocationBar: true, showNavigationBar: false, showAddress: true});'><b>test222</b></div>   

<div onclick='window.plugins.childBrowser.showWebPage("http://cran.r-project.org/doc/manuals/R-intro.pdf",
{ showLocationBar: true, showNavigationBar: false, showAddress: false});'><b>test222</b></div>   

<div onclick='window.plugins.childBrowser.showWebPage("http://cran.r-project.org/doc/manuals/R-intro.pdf",
{ showLocationBar: false, showNavigationBar: true, showAddress: false});'><b>test222</b></div>

How to use childBrowser for phonegap app

2 Answers2