▼Androidメモ▼
JavaScriptとの連携


JavaScriptとの連携を行うプログラムを作成する。



アセットの準備
次のhtmlと画像ファイルをプロジェクトのassetsフォルダに配置。
demo.html 
<html>
<head>
  <script language="javascript">
    function changeImage() {
        alert("A");
        document.getElementById("image").src="1.gif";
        alert("B");
    }
  </script>
</head>
<body>
  <a onClick="window.demo.onClick()">
    <img id="image" src="0.gif"/></a>
</body>
</html>

0.gif

1.gif


ソースコード
JSInterfaceEx.java 
package net.npaka.jsinterfaceex;
import android.app.*;
import android.os.*;
import android.view.*;
import android.webkit.*;

//JavaScriptとの連携
public class JSInterfaceEx extends Activity {
    private WebView webView;//Webビュー
    private Handler handler;//ハンドラー

    //初期化
    @Override
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        requestWindowFeature(Window.FEATURE_NO_TITLE);

        //ハンドラーの生成
        handler=new Handler();    
        
        //Webビューの生成
        webView=new WebView(this);       
        WebSettings settings=webView.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setSavePassword(false);
        settings.setSaveFormData(false);
        settings.setSupportZoom(false);
        webView.setWebChromeClient(new ChromeClient());
        webView.addJavascriptInterface(new JSInterface(),"demo");
        webView.loadUrl("file:///android_asset/demo.html");
        setContentView(webView); 
    }

    //JSインタフェース
    public final class JSInterface {
        //コンストラクタ
        public JSInterface() {
        }

        //クリックイベントの処理
        public void onClick() {
            handler.post(new Runnable() {
                public void run() {
                    webView.loadUrl("javascript:changeImage()");
                }
            });
        }
    }

    //クロームクライアント
    public final class ChromeClient extends WebChromeClient {
        //アラートイベントの処理
        @Override
        public boolean onJsAlert(WebView view,String url,String message,JsResult result) {
            android.util.Log.e("",message);
            result.confirm();
            return true;
        }
    }
}


−戻る−