AndroidでのWebViewとJavaScript(JS)の相互呼び出し
2198 ワード
Androidアプリを会社に書くとこうなります
ある日、ボスは突然あなたに、新しい需要があると言って、インタフェースはたぶんこのようにします:......%¥#@.聞いてみると、頭皮がしびれるし、UIインタフェースがこんなに複雑です.この时、ボスはあなたのつらい様子を见て、突然あなたに教えます:私达はH 5ページでこのインタフェースの代わりに、JSでクライアントのいくつかのロジックを呼び出すことを决めました.あなたは聞いて、とてもhappyで、やっとこんなに複雑なインタフェースを書く必要はありません.ではWebViewはどのようにJSと相互接続しているのでしょうか.
次に、JSでクライアントにToastを表示させる方法を説明します.
AndroidのWebViewでは、addJavaScriptInterface(Object obj,String interfaceName)メソッドを使用してこのWebViewにJSオブジェクトを設定できます.これにより、WebページのJSは指定したオブジェクト名とメソッドでクライアントのいくつかのメソッドを呼び出すことができます.
JSオブジェクトを追加する前に、WebViewにJS機能をオンにする必要があります.次のコードを使用します.
次に、Webページの呼び出しのためにJSオブジェクトを作成する必要があります.クラスを新規作成し、MyJInterfaceと命名します.この場合、メインスレッドではなく他のスレッドで実行されるため、UIの操作には追加の処理が必要です.メソッドを実装した後、このメソッド名の前に@JavascriptInterfaceコメントを付けます.このラベルはJSインタフェースであり、Webページで呼び出すことができることを示しています.次のコードです.
addJavaScriptInterfaceメソッドでJSオブジェクトをWebViewに追加し、以下に示すようにこのJSオブジェクトにMyJSと名付けます.
ここでaddキーワードに注目します.これはWebViewが複数のJSオブジェクトを追加し、異なるオブジェクト名を指定できることを示しています.ここでは1つだけ追加し、MyJInterfaceと名付けます.
ここでは、JSのshowToastメソッドで直接プログラムに呼び出すことができることを検証するために、JSのウェブページテスト事例を作成します.
コードに示すように、ページ側はfunctionにMyJInterfaceを記述するだけである.showToast(s);(オブジェクト名.メソッド)メソッドはクライアント対応のshowToastメソッドをトリガすることができる.
ある日、ボスは突然あなたに、新しい需要があると言って、インタフェースはたぶんこのようにします:......%¥#@.聞いてみると、頭皮がしびれるし、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メソッドをトリガすることができる.