javascriptからAndroidを呼び出す/Androidからjavascriptを呼び出す

javascriptAndroid

javascript interfaceを用意

適当なjavaオブジェクトでおっけー
今回はToastを表示するオブジェクト作りました

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

public class Toaster {

  private Context context;

  public Toaster(Context context) {
    this.context = context;
  }

  public void show(String text) {
    Toast.makeText(context, text, Toast.LENGTH_SHORT).show();
  }
}
WebViewにjavascript interfaceを追加する

WebViewのインスタンスを取得したらさっき作ったオブジェクトを追加します

@Override
public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

  // WebView取得
  browser = (WebView) findViewById(R.id.browser);

  // javascript有効化
  browser.getSettings().setJavaScriptEnabled(true);

  // Toastを表示するjavascript interfaceを追加
  // 第一引数がオブジェクトで、第二引数がjavascriptから呼び出すときの名前
  browser.addJavascriptInterface(new Toaster(this), Toaster.class.getSimpleName());

  // assetのindex.htmlを読み込み
  browser.loadUrl("file:///android_asset/index.html");
}
javascriptから呼び出す

あとはこんな感じで呼び出せます

<input type="button" value="click me" onclick="Toaster.show('Hello, World!')" />
実行イメージ


ボタンを押すと…

Toastが表示されました!

Androidjavascript

html側に実行するjavascriptを用意

javascriptの関数書きます
抜粋するとこんな感じ

<head>
<script type="text/javascript">
function change_message(message){
  document.getElementById('message').innerHTML = message;
}
</script>
</head>
<body>
<p id="message"></p>
</body>

alert()でもよかったんですが、android-webviewのalertは表示部分がJavaになって分かりづらいので
今回はテキストを変更する関数を書きました。

Androidから呼び出す

とっても簡単、loadUrlにjavascript書くだけ

browser.loadUrl("javascript:change_message('HogeHoge')");
実行イメージ


メニューを押すと

テキストが変わりました!