Inject code in inApp browser and get it's return value in the app

17
votes

I am writing a phonegap app, that's starting a web app inside an inAppBrowser. I would like to get certain feedback from this web app to use it further in my phonegap app.

So the user starts the web app, does some things there and upon clicking a button, the web app returns a value to the phonegap app.

I thought I could use the executeScript method of the inAppBrowser to inject a function, that would be called inside the web app using some event, and when that function is called, evaluate its return value inside the web app. All I found was the not very complete documentation of phonegap and this question on stackoverflow: Augmenting a webapp with native capabilities - Bridging PhoneGap's InAppBrowser with Rails web app application javascript

Sadly it does not work as I expected, because the callback function fires imediately, without waiting for the injected function to execute.

Here is my mobile app code

<!DOCTYPE html>
<html>
  <head>
    <title>InAppBrowser.executeScript Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Global InAppBrowser reference
    var iabRef = null;

    // Inject our custom JavaScript into the InAppBrowser window
    //
    function addFeebackFunction() {
        iabRef.executeScript(
            {code: "var evaluateFeedback = function(){return 'Done';};"},
            function(data) {
                alert(data);
            }
        );
        //iabRef.close();
    }

    function iabClose(event) {
         iabRef.removeEventListener('loadstop', addFeebackFunction);
         iabRef.removeEventListener('exit', iabClose);
    }

    // Cordova is ready
    //
    function onDeviceReady() {
         iabRef = window.open('http://{ipaddress}/test/', '_blank', 'location=no');
         iabRef.addEventListener('loadstop', addFeebackFunction);
         iabRef.addEventListener('exit', iabClose);
    }

    </script>
  </head>
  <body>
      <h1>Mobile App</h1>
  </body>
</html>

And her is my web app code

<!DOCTYPE HTML>
<html>
<head>
    <title>
        Test
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#get-feedback').click(function() {
                var feedback = $('#feedback').val();
                evaluateFeedback(feedback);
            });
        });
    </script>
</head>
<body>
<div data-role="page">
    <article data-role="content">
        <h1>Web app</h1>
        <input type="text" id="feedback" /><br />
        <button type="button" id="get-feedback">Feedback</button>
    </article>
</div>
</body>
</html>
4
javascriptcordovaphonegap-plugins
I also couldn't get iabRef.executeScript to return a value. I never get inside the callback function. This is working fine in IOS, but not on android. I was able to walk through the debug code in android and it looked ok. Were you able to get this to work? – TWilly
I abandoned Cordova completely and opted for writing my own interface between the webviews and the app. – Oliver
Upgrading to phonegap 3.1 solved the issue for me. I targeted android kitkat and that broke things in phonegap 3.0. – TWilly
FYI the latest ionic cordova plugin for IAB no longer takes a callback method, but instead returns a Promise<any> – FlavorScape

4 Answers

2
votes

Just a wild guess, but you're not executing this function...

{code: "var evaluateFeedback = function(){return 'Done';};evaluateFeedback();"}

or better: {code: "'Done';"}

1
votes
                ref.addEventListener('loadstart', function(event){
                    //alert('start: ' + event.url);
                });
                ref.addEventListener('loadstop', function(event){
                    //alert('stop: ' + event.url);
                });
                ref.addEventListener('loaderror', function(event){
                    //alert('error: ' + event.message);
                });
                ref.addEventListener('exit', function(event){

                });

Use above for events for taking return value back in the application

1
votes

check out this, it might be something you are looking for here

0
votes

In the code string value, define a function and call it. The return value will come back in the callback's argument (or in ngCordova as the promise' resolved argument). Thanks to @Jonathan Adami for the suggestion.