AndroidでのWebViewとJavaScript(JS)の相互呼び出し

2198 ワード

Androidアプリを会社に書くとこうなります
ある日、ボスは突然あなたに、新しい需要があると言って、インタフェースはたぶんこのようにします:......%¥#@.聞いてみると、頭皮がしびれるし、UIインタフェースがこんなに複雑です.この时、ボスはあなたのつらい様子を见て、突然あなたに教えます:私达はH 5ページでこのインタフェースの代わりに、JSでクライアントのいくつかのロジックを呼び出すことを决めました.あなたは聞いて、とてもhappyで、やっとこんなに複雑なインタフェースを書く必要はありません.ではWebViewはどのようにJSと相互接続しているのでしょうか.
次に、JSでクライアントにToastを表示させる方法を説明します. 

一、WebViewのJS機能を起動する


AndroidのWebViewでは、addJavaScriptInterface(Object obj,String interfaceName)メソッドを使用してこのWebViewにJSオブジェクトを設定できます.これにより、WebページのJSは指定したオブジェクト名とメソッドでクライアントのいくつかのメソッドを呼び出すことができます.
JSオブジェクトを追加する前に、WebViewにJS機能をオンにする必要があります.次のコードを使用します.
mWebView.getSettings().setJavaScriptEnabled(true);

二、JSオブジェクトの作成


次に、Webページの呼び出しのためにJSオブジェクトを作成する必要があります.クラスを新規作成し、MyJInterfaceと命名します.この場合、メインスレッドではなく他のスレッドで実行されるため、UIの操作には追加の処理が必要です.メソッドを実装した後、このメソッド名の前に@JavascriptInterfaceコメントを付けます.このラベルはJSインタフェースであり、Webページで呼び出すことができることを示しています.次のコードです.
public class JSInterface {
private Context mContext;
public JSInterface(Context context){
mContext = context;
}
    @JavascriptInterface
    public void showToast(String s){
new Handler(mContext.getMainLooper()).post(new Runnable() {
    @Override
    public void run() {

        Toast.makeText(mContext,s,Toast.LENGTH_SHORT).show();

}
}
    }
}

三、このJSをWebViewに登録する


addJavaScriptInterfaceメソッドでJSオブジェクトをWebViewに追加し、以下に示すようにこのJSオブジェクトにMyJSと名付けます.
        mWebView.addJavascriptInterface(new MyJSInterface(mContext),
                "MyJSInterface");

ここでaddキーワードに注目します.これはWebViewが複数のJSオブジェクトを追加し、異なるオブジェクト名を指定できることを示しています.ここでは1つだけ追加し、MyJInterfaceと名付けます.

四、JSホームページのテスト事例を作成する


ここでは、JSのshowToastメソッドで直接プログラムに呼び出すことができることを検証するために、JSのウェブページテスト事例を作成します.




TEST DEMO


function showToast(){ MyJSInterface.showToast('Test'); }

コードに示すように、ページ側はfunctionにMyJInterfaceを記述するだけである.showToast(s);(オブジェクト名.メソッド)メソッドはクライアント対応のshowToastメソッドをトリガすることができる.