web-dev-qa-db-ja.com

inAppブラウザーにコードを挿入し、アプリでその戻り値を取得します

私はphonegapアプリを書いています。それは、inAppBrowser内でWebアプリを起動しています。このWebアプリから特定のフィードバックを取得して、phonegapアプリでさらに使用したいと思います。

そのため、ユーザーはWebアプリを起動し、そこでいくつかのことを実行し、ボタンをクリックすると、Webアプリはphonegapアプリに値を返します。

InAppBrowserのexecuteScriptメソッドを使用して、何らかのイベントを使用してWebアプリ内で呼び出される関数を挿入し、その関数が呼び出されたときに、Webアプリ内でその戻り値を評価できると思いました。私が見つけたのは、phonegapの完全ではないドキュメントとstackoverflowに関するこの質問だけでした： ネイティブ機能でWebアプリを拡張する-PhoneGapのInAppBrowserをRails Webアプリアプリケーションjavascript でブリッジする

残念ながら、注入された関数の実行を待たずにコールバック関数がすぐに起動するため、期待どおりに機能しません。

これが私のモバイルアプリコードです

<!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>

そして彼女は私のウェブアプリのコードです

<!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>
javascriptcordovaphonegap-plugins
17
Oliver

ただの大げさな推測ですが、あなたはこの関数を実行していません...

{コード： "varvaluateFeedback = function（）{return '完了';}; evaluateFeedback（）;"}

以上：{コード： "'完了';"}

2
Jonathan Adami

これをチェックしてください、それはあなたが探しているものかもしれません ここ

1
johnny
                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){

                });

アプリケーションで戻り値を取り戻すためのイベントに上記を使用します

1
Abdulqadir_WDDN

code文字列値で、関数を定義して呼び出します。戻り値は、コールバックの引数（またはpromiseの解決済み引数としてngCordova）に返されます。提案してくれた@JonathanAdamiに感謝します。

0
ABCD.ca