Android における Java と JS 間の対話

参考：https://segmentfault.com/a/1190000011487440

WebViewの使用

WebViewの初期化

 WebView  webView= (WebView) findViewById(R.id.webview);
 webView.loadUrl("file:///android_asset/index.html");

対話する前に、WebView の JS サポートを有効にする必要があります

WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);

JavaがJSメソッドを呼び出す

WebViewのloadUrl()経由
WebView の EvaluateJavascript() 経由

まず HTML ファイルを定義し、それをアセットディレクトリに配置します。

<html>

<head>
    <title>我的页面</title>
    <meta charset=utf-8> 
    <script type="application/javascript">
        function alertTest() {
      
      
            alert("alerttest");
        }
    </script>
</head>

<body>
    <p>Android Java JS 交互测试</p>
</body>

</html>

(1)loadUrl経由でJSメソッドを呼び出す

mWebView.post(new Runnable() {
    
    
            @Override
            public void run() {
    
    
                mWebView.loadUrl("javascript:alertTest()");
            }
        });

(2)evaluateJavascript経由でJSメソッドを呼び出す

mWebView.evaluateJavascript("javascript:alertTest()", new ValueCallback<String>() {
    
    
            @Override
            public void onReceiveValue(String value) {
    
    
                Toast.makeText(WebViewActivity.this, value, Toast.LENGTH_SHORT).show();
            }
        });

これら 2 つのメソッドが最初に呼び出されるとき、問題はエラーメッセージが報告されることです。エラーメッセージは、呼び出された JS メソッドが定義されていないことを示します。問題の理由は、呼び出されたときに JavaScript ファイルが完全に完了していないことです。 oncreate メソッドまたは onResume メソッドで読み込みが完了したため、この問題が発生しますが、WebView の読み込みイベントをリッスンして呼び出しを遅らせることで解決できます。

JSがJavaメソッドを呼び出す

WebView 経由の JavascriptInterface
WebViewClient.ShouldOverrideUrlLoading() を通じて読み込み情報をインターセプトします
WebChromeClient.onConsoleMessage() を通じてコンソール情報を傍受します。
WebChromeClient.onJsPrompt()、onJsAlert()、onJsconfirm() を通じて、対応する Web ポップアップボックスのイベントをインターセプトします。

(1) WebView経由のJavaScriptインターフェース

① JS関連のインタラクティブなクラスとメソッドを定義し、メソッドに@JavascriptInterfaceアノテーションを付ける

public class JSTest {
    
    

  private Context mContext;

  public JSTest(Context context) {
    
    
      mContext = context;
   }

  @JavascriptInterface
  public void showToast(String str) {
    
    
       Toast.makeText(mContext, str, Toast.LENGTH_SHORT).show();
  }
}

@JavascriptInterface は、WebView によって呼び出すことができるメソッドをマークするために使用されます。

②WebViewにJavaScriptInterface（つまりクラス名JsTest）を追加し、JSファイル内で使用する名前「JsTest」を指定します。

 mWebView.addJavascriptInterface(new JsTest(context), "JsTest");

addJavascriptInterface(Object object, String name) は、Java オブジェクトをグローバル変数としてJavaScript 環境に挿入する
ために使用され、JavaScript コードで Java オブジェクトのすべてのパブリックメソッドを使用できるようになります。

私の理解では、addJavascriptInterface は Java クラス (インターフェイス) を JavaScript クラスに関連付けるために使用されます。

③JSがJavaメソッドを呼び出す

 function showToast() {
    
    
        JsTest.showToast("来自Web调用");
 }

(2) WebViewのコールバック関数onConsoleMessage()経由

WebChromeClient には onConsoleMessage() という関数のコールバックがあり
、js にコンソールメッセージがある場合は onConsoleMessage がコールバックされます。
したがって、onConsoleMessage メソッドは Override によってカスタマイズでき、js がコンソールメッセージをトリガーして Java 側で onConsoleMessage メソッドを呼び出し、その後他のコードを呼び出すことができます。

① WebChromeClientにコールバックメソッドを定義する

 @Override
    public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
    
    
        String msg = consoleMessage.message();
        if ("showToast".equals(msg)) {
    
    
            Toast.makeText(mContext, "来自Web Toast测试", Toast.LENGTH_SHORT).show();
        }
        return super.onConsoleMessage(consoleMessage);
    }

②JSはコンソールにメッセージを出力します

 function consoleTest() {
    
    
     console.log("showToast");
 }

【Androidセキュリティ】AndroidにおけるJavaとJSの連携

Android における Java と JS 間の対話

WebViewの使用

JavaがJSメソッドを呼び出す

JSがJavaメソッドを呼び出す

おすすめ