Android WebViewとJavaScriptの相互作用【経典】

Android WebViewとJavaScriptがインタラクティブNovember 21、2015
https://mthli.github.io/Android-WebView-JavaScript
最近はWebViewに関する仕事をしていますが、JavaScriptとのインタラクティブな操作が含まれています.多くのブログを検索しています.文章があまりよくないと感じて、多くの時間をかけてやっと分かりました.ここで改めてまとめてみます.皆さんのために役に立つと思います.
操作の前提
私たちの目標はJavaScriptと対話することですので、webView.getSettings().setJavaScriptEnabled(true); もちろん必要です.
WebViewでJavaScriptを呼び出す方法
JavaScriptを呼び出すだけの方法であれば、そのままwebView.loadUrl("javascript:METHOD")を使用することができます. を実装し、METHOD あなたが望むJavaScriptの方法です.直接ChromeでF 12を押してコンサートに入ります.
注意したいのは、呼び出しです.  loadUrl() 4.4以前のWebViewでは、ウェブページの重載(4.4以降は目立った影響はない)につながりますが、ウェブページの重載によりソフトキーボードの入力焦点が消失するなどの問題があります.
JavaScriptにパラメータを渡す
まず注意しなければならないことは、JavaScriptは弱いタイプです.だから、Javaから伝達されるパラメータについては、JavaScriptで自分で処理する必要があります.
文字列形式のパラメータには、シングルクォーテーションマークを使用することを必ず覚えてください.  ' それを包んでください.さもなければ、JavaScriptはこの文字列を解析できなくなり、定義されていないことをヒントを与えます.
この以外にもピットに注意が必要です.もしJavaScriptに伝達したい文字列には\が含まれています. または  %5C の串はいずれもJavaScriptの中の転義を招くので、私達は正しいです.  \ または  %5C 処理を行う.たとえば  \ 文字列を置き換えることができます.  \\ ,に対する  \\ 私たちに本当に必要なものに変えられます.  \ .
残りのことは簡単です.例えばJavaScriptにはこのような方法があります.

//      HTML
function insertHTML(html) {
    ...
} 

WebViewではこのように呼びます.

String html = ...;
html = html.replaceAll("\\\\", "\\\\\\\\");
webView.loadUrl("javascript:insertHTML('" + html + "')"); 

JavaScriptはJavaメソッドを呼び出します.
JavaScriptで関連するJavaメソッドを呼び出すには、WebViewの設定が必要です.
まず、WebViewにJavaScriptを追加して直接に呼び出すことができるインターフェースが必要です.便宜上、私は直接にWebView全体をインターフェースオブジェクトとしてaddJavascriptInterface()に伝えます. の中で、同時にインターフェースの対象に名前をつけることを覚えます.
次に、JavaScriptが起動できるすべてのJava方法に@JavascriptInterfaceを追加します. のコメント
あなたのJavaScriptコードからJavaメソッドを呼び出すことができます.全体コードは大体このように見えます.

public class MyWebView extends WebView {
    public MyWebView(Context context) {
        ...
        getSettings().setJavaScriptEnabled(true);
        addJavascriptInterface(this, "MyName");
        ...
    }

    @JavascriptInterface
    public void example() {
        ...
    }
} 

JavaScriptにはこう書かれています.

//    MyWebView    example()   
function example() {
    MyName.example();
} 

JavaScriptの戻り値を取得します.
多くの場合、JavaScriptは一つの方法を実行するだけではなく、リターン値、例えばブール値、または文字列を取得したいです.
Android 4.4およびそれ以上のバージョンでは、GoogleはWebViewにevaluateJavascript()という名前のものを提供しています. この方法は、JavaScriptメソッドの実行が完了すると、フィードバック値の文字列形式が生成されますので、自分で手動で必要なタイプに変換する必要があります.具体的な例は、このリンクを参照することができる.
もちろん、簡単で低バージョンのAndroidに対応する方法を使ってもいいです.たとえば私たちは  MyWebView には次のような方法があります.

@JavascriptInterface
public void log(String tag, boolean value) {
    Log.v(tag, String.valueOf(value));
} 

JavaScriptにはこう書かれています.

function log() {
    MyName.log("tag", true);
} 

JavaBridgeは自動的にパラメータを必要なタイプに変換します.もちろん、変換が正確であることを保証します.
UIレベルの変更について
Androidは、メインスレッドでのみUIの変更を許可します.JavaScriptでWebViewの方法を呼び出してインタフェースを修正したら、JavaBridgeはメインスレッドにないので、メインスレッドにあるHandlerを新たに作ってUIを操作します.

public class MyWebView extends WebView {
    private Handler handler = new Handler(Looper.getMainLooper());

    ...

    @JavascriptInterface
    public void changeUI() {
        handler.post(new Runnable() {
            ...
        });
    }
} 

Chromeリモートデバッグ
もしあなたがAndroid 4.4とそれ以上のバージョンのWebViewを使っているなら、これは非常に有用な機能であり、具体的にはこのリンクを参照することができます.
上記の文章について不明な点があれば、Googleの公式文書を参照してください.
戻る