AndroidのWebViewでjavascriptから戻り値を取得するにはどうすればよいですか?


83

AndroidのJavascriptから戻り値を取得したい。iPhoneではできますが、Androidではできません。loadUrlを使用しましたが、オブジェクトではなくvoidが返されました。誰か助けてもらえますか?

回答:


79

と同じですKeithが短い答え

webView.addJavascriptInterface(this, "android");
webView.loadUrl("javascript:android.onData(functionThatReturnsSomething)");

そして、関数を実装します

@JavascriptInterface
public void onData(String value) {
   //.. do something with the data
}

削除することを忘れてはいけないonDataからproguardリスト(あなたがProGuardのを有効にした場合)


1
そのproguard部分について詳しく説明していただけますか?
ユージーン2014

@eugeneそれが何であるかわからない場合は、おそらくそれを使用しないでしょう。とにかく、アプリのリバースエンジニアリングを困難にする有効化するもの
Kirill Kulakov 2014

1
ありがとう。プロジェクトルートにproguard-project.txtがあることは知っていますが、それ以上ではありません。あなたの解決策が機能するので私は尋ねていますが、私はSIGSEGVを取得します。document.getElementById("my-div").scrollTopからスクロール位置を取得することを評価していますSwipeRefreshLayout::canChildScrollUp()。短期間に何度も電話がかかってきたせいかもしれません。またはproguardその私はちょうどそれが何であるかわからないので、私は疑う...
ユージン

ここでコメントされているすべてのハックではなく、これが受け入れられた答えである必要があります
RomitKumar19年

64

これを達成する方法のハックは次のとおりです。

このクライアントをWebViewに追加します。

final class MyWebChromeClient extends WebChromeClient {
        @Override
        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
            Log.d("LogTag", message);
            result.confirm();
            return true;
        }
    }

今あなたのjavascript呼び出しで行います:

webView.loadUrl("javascript:alert(functionThatReturnsSomething)");

これで、onJsAlert呼び出しで、「メッセージ」に戻り値が含まれます。


17
これは非常に価値のあるハックです。特に、JavaScriptを制御できず、既存の関数を使用する必要があるアプリを構築している場合はなおさらです。のpublic boolean onConsoleMessage(ConsoleMessage consoleMessage)代わりにを使用してJSアラートをインターセプトせずに同じ結果を得ることができることに注意してください。onJsAlertその後、JavaScript呼び出しでwebView.loadUrl("javascript:console.log(functionThatReturnsSomething)");、JSアラートをそのままにします。
ミック・バーン2012

のソリューションはWebChromeClient.onConsoleMessageよりクリーンなようですが、一部のHTCデバイスでは機能しないことに注意してください。詳細については、この質問を参照してください。
piotr

3
addJavascriptInterfaceを使用する理由は望ましくありませんか?
キース

@Keith:javascriptが結果を書き込むオブジェクトが必要ですが、この質問では既存のjavascriptに触れることができず、既存のjsはそのようなオブジェクトに書き込まないため、jsインターフェイスメソッドはここでは役に立ちません(それが私がそれを理解した方法です)。
レイ

1
@RayKoopa必ずしも真実ではありません。ターゲットWebページ内の既存のJavaScriptを編集できない場合でもmWebView.addJavascriptInterface(YourObject mYourObject,String yourNameForObject);、関数mWebView.loadUrl("javascript:yourNameForObject.yourSetterMethod(valueToSet)")
Chris

21

addJavascriptInterface()JavaオブジェクトをJavascript環境に追加するために使用します。JavascriptでそのJavaオブジェクトのメソッドを呼び出して、その「戻り値」を提供します。



jsがこのオブジェクトに書き込まず、jsに触れることができない場合、これは役に立ちません。
レイ

7
@PacMani:loadUrl("javascript:...")(APIレベル1-18)またはevaluateJavascript()(APIレベル19+)を使用して、現在ロードされているWebページのコンテキストで独自のJavaScriptを評価します。
CommonsWare 2014

@CommonsWare:ありがとうございます;)しかし、マネージャーはjsを「JavaScriptアラートの乱用」(eyeroll)で変更できると判断したので、インターフェイスメソッドを使用しました。
レイ

12

これが私が今日思いついたものです。スレッドセーフで、適度に効率的で、AndroidWebViewのJavaからの同期Javascript実行を可能にします。

Android2.2以降で動作します。(コードスニペットをJavascript文字列としてeval()に渡す必要があるため、commons-langが必要です。コードを引用符ではなくでラップすることでこの依存関係を削除できます。function(){}))

まず、これをJavascriptファイルに追加します。

function evalJsForAndroid(evalJs_index, jsString) {
    var evalJs_result = "";
    try {
        evalJs_result = ""+eval(jsString);
    } catch (e) {
        console.log(e);
    }
    androidInterface.processReturnValue(evalJs_index, evalJs_result);
}

次に、これをAndroidアクティビティに追加します。

private Handler handler = new Handler();
private final AtomicInteger evalJsIndex = new AtomicInteger(0);
private final Map<Integer, String> jsReturnValues = new HashMap<Integer, String>();
private final Object jsReturnValueLock = new Object();
private WebView webView;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    webView = (WebView) findViewById(R.id.webView);
    webView.addJavascriptInterface(new MyJavascriptInterface(this), "androidInterface");
}

public String evalJs(final String js) {
    final int index = evalJsIndex.incrementAndGet();
    handler.post(new Runnable() {
        public void run() {
            webView.loadUrl("javascript:evalJsForAndroid(" + index + ", " +
                                    "\"" + StringEscapeUtils.escapeEcmaScript(js) + "\")");
        }
    });
    return waitForJsReturnValue(index, 10000);
}

private String waitForJsReturnValue(int index, int waitMs) {
    long start = System.currentTimeMillis();

    while (true) {
        long elapsed = System.currentTimeMillis() - start;
        if (elapsed > waitMs)
            break;
        synchronized (jsReturnValueLock) {
            String value = jsReturnValues.remove(index);
            if (value != null)
                return value;

            long toWait = waitMs - (System.currentTimeMillis() - start);
            if (toWait > 0)
                try {
                    jsReturnValueLock.wait(toWait);
                } catch (InterruptedException e) {
                    break;
                }
            else
                break;
        }
    }
    Log.e("MyActivity", "Giving up; waited " + (waitMs/1000) + "sec for return value " + index);
    return "";
}

private void processJsReturnValue(int index, String value) {
    synchronized (jsReturnValueLock) {
        jsReturnValues.put(index, value);
        jsReturnValueLock.notifyAll();
    }
}

private static class MyJavascriptInterface {
    private MyActivity activity;

    public MyJavascriptInterface(MyActivity activity) {
        this.activity = activity;
    }

    // this annotation is required in Jelly Bean and later:
    @JavascriptInterface
    public void processReturnValue(int index, String value) {
        activity.processJsReturnValue(index, value);
    }
}

2
上記のコードをありがとうございます-私はAndroidプロジェクトでそれを採用しました。ただし、Java APIの設計が不適切なため、トラップが発生します。次の行:jsReturnValueLock.wait(waitMs-(System.currentTimeMillis()-start)); wait()関数の引数の値がたまたま0と評価されることがあります。これは、「無限に待機する」ことを意味します。「応答なし」エラーが発生することがありました。私は次のことをテストすることでそれを解決しました:if(elapsed> = waitMS)break; 以下のSystem.currentTimeMillis()を再度呼び出すのではなく、経過値を使用します。上記のコードを編集して修正することをお勧めします。
gregko 2013年

どうもありがとう!私もそれがぶら下がっているのを見ていました、そしてそれがどこから来ているのか理解できませんでした。
キース

1
しかし、button.clickリスナーなどでevalJSを実行すると、waitForJsReturnValueにより、evalJs()がハングアップする場合があります。そのため、button.clickリスナーが返されないため、handler.post()内のwebView.loadUrl()が実行されない可能性があります。
victorwoo 2013

しかし、コードを引用符ではなく、どのようにラップするのfunction(){}ですか?jsStringを配置する方法は{}
victorwoo 2013年

7

API 19以降では、これを行う最良の方法は、WebViewでevaluateJavascriptを呼び出すことです。

webView.evaluateJavascript("foo.bar()", new ValueCallback<String>() {
    @Override public void onReceiveValue(String value) {
        // value is the result returned by the Javascript as JSON
    }
});

より詳細な関連回答:https//stackoverflow.com/a/20377857


5

@Felix Khazinが提案した解決策は機能しますが、1つの重要なポイントが欠けています。

javascriptの呼び出しは、のWebページWebViewがロードされた後に行う必要があります。と一緒WebViewClientに、これをに追加WebViewしますWebChromeClientます。

完全な例:

@Override
public void onCreate(Bundle savedInstanceState) {
    ...
    WebView webView = (WebView) findViewById(R.id.web_view);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.setWebViewClient(new MyWebViewClient());
    webView.setWebChromeClient(new MyWebChromeClient());
    webView.loadUrl("http://example.com");
}

private class MyWebViewClient extends WebViewClient {
    @Override
    public void onPageFinished (WebView view, String url){
        view.loadUrl("javascript:alert(functionThatReturnsSomething())");
    }
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        return false;
    }
}

private class MyWebChromeClient extends WebChromeClient {
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
    Log.d("LogTag", message);
        result.confirm();
        return true;
    }
}

1

カスタムスキームを使用する代替バリアントとして:

主な活動

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            WebView.setWebContentsDebuggingEnabled(true);
        }

        final WebView webview = new CustomWebView(this);

        setContentView(webview);

        webview.loadUrl("file:///android_asset/customPage.html");

        webview.postDelayed(new Runnable() {
            @Override
            public void run() {

                //Android -> JS
                webview.loadUrl("javascript:showToast()");
            }
        }, 1000);
    }
}

CustomWebView

public class CustomWebView extends WebView {
    public CustomWebView(Context context) {
        super(context);

        setup();
    }

    @SuppressLint("SetJavaScriptEnabled")
    private void setup() {
        setWebViewClient(new AdWebViewClient());

        getSettings().setJavaScriptEnabled(true);

    }

    private class AdWebViewClient extends WebViewClient {

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {

            if (url.startsWith("customschema://")) {
                //parse uri
                Toast.makeText(CustomWebView.this.getContext(), "event was received", Toast.LENGTH_SHORT).show();

                return true;
            }


            return false;
        }

    }
}

customPage.html(折りたたまれたアセットにあります)

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript View</title>

    <script type="text/javascript">

        <!--JS -> Android-->
        function showToast() {
            window.location = "customschema://goto/";
        }

    </script>
</head>

<body>

</body>
</html>

0

あなたはこのようにそれを行うことができます:

[Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]
public class MainActivity : AppCompatActivity
{
    public WebView web_view;
    public static TextView textView;

    protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        Xamarin.Essentials.Platform.Init(this, savedInstanceState);

        Window.AddFlags(WindowManagerFlags.Fullscreen);
        Window.ClearFlags(WindowManagerFlags.ForceNotFullscreen);

        // Set our view from the "main" layout resource
        SetContentView (Resource.Layout.main);

        web_view = FindViewById<WebView>(Resource.Id.webView);
        textView = FindViewById<TextView>(Resource.Id.textView);

        web_view.Settings.JavaScriptEnabled = true;
        web_view.SetWebViewClient(new SMOSWebViewClient());
        web_view.LoadUrl("https://stns.egyptair.com");
    }

    public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
    {
        Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);

        base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
    }
}

public class SMOSWebViewClient : WebViewClient
{
    public override bool ShouldOverrideUrlLoading(WebView view, IWebResourceRequest request)
    {
        view.LoadUrl(request.Url.ToString());
        return false;
    }

    public override void OnPageFinished(WebView view, string url)
    {
        view.EvaluateJavascript("document.getElementsByClassName('notf')[0].innerHTML;", new JavascriptResult());
    }
}

public class JavascriptResult : Java.Lang.Object, IValueCallback
{
    public string Result;

    public void OnReceiveValue(Java.Lang.Object result)
    {
        string json = ((Java.Lang.String)result).ToString();
        Result = json;
        MainActivity.textView.Text = Result.Replace("\"", string.Empty);
    }
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.