Edited at

JavaScript から Android 側のメソッドを呼び出す

More than 3 years have passed since last update.

今回は単純に、WebView 内の JavaScript から Android のトーストを表示してみます。

まず、Android 側で、JavaSript ⇔ Android(Activity) 間のブリッジとなるクラスを新規に作成し、

スクリーンショット_2015-01-28_13_27_43.png

hogeMethod メソッドが呼ばれたら、トーストを表示するようにします。


クラス名は安直に JavaScript としましたが、何でもいいです。



JavaScript.java

package com.example.hkusu.javascripttest;

import android.content.Context;
import android.widget.Toast;

public class JavaScript {
private Context c;

public JavaScript(Context c) {
this.c = c;
}

public void hogeMethod(String s) {
Toast toast = Toast.makeText(c, s, Toast.LENGTH_LONG);
toast.show();
}
}


Android 側の Activity で、WebView インスタンスを生成します。


MainActivity.java

package com.example.hkusu.javascripttest;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.webkit.WebView;

public class MainActivity extends ActionBarActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

WebView wv = new WebView(this);
wv.getSettings().setJavaScriptEnabled(true);
//wv.setWebViewClient(new WebViewClient());
wv.addJavascriptInterface(new JavaScript(this), "android");
setContentView(wv);
wv.loadUrl("file:///android_asset/hoge.html");
}
}



《WebView》.getSettings().setJavaScriptEnabled(true) で WebView 内で JavaScript 利用を有効化しています。

《WevView》.addJavascriptInterface(new JavaScript(this), "android") で先ほどの JavaScript クラスをアタッチしています。ここの android という文字列は任意の文字列で、JavaScript 側から見える『オブジェクト名』です。


次に HTML(JavaScript) を作成します。今回は、WebVeiw でロードする HTML は Android プロジェクトに内包することにします。(もし無ければ)Android プロジェクトの resディレクトリと同じ階層に assetsディレクトリを作成して hoge.html を設置し、

スクリーンショット_2015-01-28_13_30_19.png

次のように書きます。


単純にボタンが押下されたら android.hogeMethod() をコールだけのものです。



hoge.html

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>Toastを表示するテスト</title>
</head>
<body>
<button onClick="android.hogeMethod('ほげほげ')">Toastを表示</button>
</body>
</html>

※ もし外部のHTMLファイルを http:// でロードする場合は、AndroidManifest.xml でインターネットアクセスのパーミッションを設定しておく必要があります。


動かしてみる

ボタンを押すと..

Screenshot_2015-01-28-14-46-06.png

トーストが表示されました。

Screenshot_2015-01-28-14-56-26.png


おわりに

これを応用すれば、いろいろ出来そう。