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

问题

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>

回答1:

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

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

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

回答2:

                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

回答3:

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

回答4:

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.

来源：https://stackoverflow.com/questions/16517693/inject-code-in-inapp-browser-and-get-its-return-value-in-the-app

标签

javascript

cordova

phonegap-plugins