WebView+JavaScript - もちゅるの日常

概要

WebViewを通して開いているhtmlページ.
その中に表示されているJavaScriptが登録されているボタン.
このボタンを押してAndroid側へコマンドを実行する方法.

画像

送信を押したら画面を閉じる

ポイント

JavaScriptから実行できるメソッド用意

class JsHandler {
    public void onClickFromHtml() {
        finish();
    }
}

JavaScript有効化

webView.getSettings().setJavaScriptEnabled(true);

インスタンス受け渡しとインスタンス名の設定

webView.addJavascriptInterface(new JsHandler(), "app");

JavaScript側の呼び出し

<input type="button" value="送信" onClick="app.onClickFromHtml()" />

xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>このアプリについて</title>
</head>
<body>
うんたらかんたら.
<input type="button" value="送信" onClick="app.onClickFromHtml()" />
</body>
</html>

Activity

/** ローカル上のhtmlを表示するWebViewアクティビティ */
public class LocalWebViewActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.local_web_view_layout);

        WebView webView = (WebView) findViewById(R.id.webView1);

        webView.getSettings().setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new JsHandler(), "app");
        webView.loadUrl("file:///android_asset/about.html");
    }

    /** JavaScriptハンドラ */
    class JsHandler {
        /** Htmlから呼ばれるメソッド */
        public void onClickFromHtml() {
            finish();
        }
    }
}