WebViewとJavaScriptのインタラクション

Html 5の台頭に伴い、現在人気のあるReact Native、Cordovaなどのフレームワークのように、Web ViewとJavaScriptのインタラクションに遭遇することは避けられません.
まずWebViewを構成します

webview = (WebView) findViewById(R.id.webview);
        webview.loadUrl("file:///android_asset/testjs.html");
        findViewById(R.id.btn_call_js_no_params).setOnClickListener(this);
        findViewById(R.id.btn_call_js_params).setOnClickListener(this);
        settings = webview.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setJavaScriptCanOpenWindowsAutomatically(true);//     JS  
        webview.setWebChromeClient(new WebChromeClient());
        webview.addJavascriptInterface(new AndroidJs(), "JavaScriptObject");//   Js   ，Js               

1.Android呼び出しJavaScript無参メソッド
jsメソッド

 function sendMsg(){
       return "Android   Js    ";
    }

Android呼び出しjsのsendMsgメソッド

 webview.evaluateJavascript("javascript:sendMsg()", new ValueCallback() {
                    @Override
                    public void onReceiveValue(String value) {
                        if (value != null) {
                            Toast.makeText(MainActivity.this, value, Toast.LENGTH_SHORT).show();
                        }
                    }
                });

JavaScriptのsendMsg関数をevaluateJavascriptメソッドで呼び出し、Jsがreturnで与えた文字列であるコールバック文字列を取得します.
残念ながら、この方法はAndroid API 19以上のバージョンでなければ使用できません.以下のバージョンを互換化するには、特殊な方法で処理しなければなりませんが、今日は以下のバージョンを互換化しません.現在はほとんど5.0以上のユーザーですから.
2.Android呼び出しJavaScriptにはメソッドがあります
jsメソッド

function getAndroidValue(value){
        alert(value);
    }

Androidメソッド

 String msg2Js = "Android        Js";
                webview.evaluateJavascript("javascript:getAndroidValue('" + msg2Js + "')", new ValueCallback() {
                    @Override
                    public void onReceiveValue(String value) {
                    }
                });

ここでAndroidはJsのgetAndroid Valueメソッドを呼び出し、jsに窓を弾かせる文字列パラメータを渡します.弾窓の内容は私たちが伝えたパラメータです
3.JavaScript Android非参照メソッドの呼び出し
jsコード

  Android    

function callAndroidNoParams(){
        JavaScriptObject.noParams();
    }

AndroidここにはJsのインターフェースがオープンしています

 webview.addJavascriptInterface(new AndroidJs(), "JavaScriptObject");//   Js   ，Js               

私たちはAndroid JSというクラスにいます.

class AndroidJs extends Object {

        @JavascriptInterface
        public void noParams() {
            Toast.makeText(MainActivity.this, "Js  Android    ", Toast.LENGTH_SHORT).show();
        }
    }

4.JavaScriptがAndroidを呼び出す方法
Jsコード

  Android    

function callAndroidParams(){
        JavaScriptObject.paramsToast("js  Android    ");
    }

AndroidがJsに露出する方法で、彼が与えた値を取得し、Toastが出てきます.

 @JavascriptInterface
        public void paramsToast(String content){
            if (content!=null){
                Toast.makeText(MainActivity.this, content, Toast.LENGTH_SHORT).show();
            }
        }

ヒント:
Android 5.0以下のバージョンJsの戻り値を取得するには、Jsメソッドを呼び出し、Jsにメソッドを呼び出して値を渡すことをお勧めします.
すべてのコード
testjs.html

    
    
    
    
    
    

    

     function sendMsg(){
       return "Android   Js    ";
    }

    function getAndroidValue(value){
        alert(value);
    }

    function callAndroidNoParams(){
        JavaScriptObject.noParams();
    }

    function callAndroidParams(){
        JavaScriptObject.paramsToast("js  Android    ");
    }

    



    Hello World!!!
      Android    
    
      Android    

Androidコード

package com.wj.jsjavademo;

import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Toast;

@RequiresApi(api = Build.VERSION_CODES.KITKAT)
public class MainActivity extends AppCompatActivity implements View.OnClickListener {


    private WebView webview;
    private WebSettings settings;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initWebView();
    }

    private void initWebView() {
        webview = (WebView) findViewById(R.id.webview);
        webview.loadUrl("file:///android_asset/testjs.html");
        findViewById(R.id.btn_call_js_no_params).setOnClickListener(this);
        findViewById(R.id.btn_call_js_params).setOnClickListener(this);
        settings = webview.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setJavaScriptCanOpenWindowsAutomatically(true);//     JS  
        webview.setWebChromeClient(new WebChromeClient());
        webview.addJavascriptInterface(new AndroidJs(), "JavaScriptObject");//   Js   ，Js               
    }


    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_call_js_no_params:
                webview.evaluateJavascript("javascript:sendMsg()", new ValueCallback() {
                    @Override
                    public void onReceiveValue(String value) {
                        if (value != null) {
                            Toast.makeText(MainActivity.this, value, Toast.LENGTH_SHORT).show();
                        }
                    }
                });
                break;
            case R.id.btn_call_js_params:
                String msg2Js = "Android        Js";
                webview.evaluateJavascript("javascript:getAndroidValue('" + msg2Js + "')", new ValueCallback() {
                    @Override
                    public void onReceiveValue(String value) {
                    }
                });
                break;
        }
    }

    class AndroidJs extends Object {

        @JavascriptInterface
        public void noParams() {
            Toast.makeText(MainActivity.this, "Js  Android    ", Toast.LENGTH_SHORT).show();
        }

        @JavascriptInterface
        public void paramsToast(String content){
            if (content!=null){
                Toast.makeText(MainActivity.this, content, Toast.LENGTH_SHORT).show();
            }
        }
    }
}