2012年6月18日月曜日

AndroidとJavaScriptの連携:WebView addJavascriptInterface





①、Android側:WebView で assets フォルダの HTMLファイルを表示。
②、HTMLファイル読み込み後、データ送信(実行するJavaScript)。
③、HTML側:Adnroid から送られてきたデータを表示。その後、
④、Androidにデータを送り返す。
⑤、Android側:HTMから受け取ったデータをTextViewに表示

 
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="jquery.min.js"></script>
  <script type="text/javascript">
   function anFunc(arg) {
    // Javaからのデータを処理
    //$("div#test").append("jQueryで表示");//jQueryは今回使わない
    var element=document.getElementById("test").innerText="Android から送られた文字:" + arg;//③
    
    //Javaのメソッドを呼び出す Androidにデータを送信④
    //window.interfaceName.makeToast();//Tostを表示する場合
    window.interfaceName.logOutput("HTMLからのデータ");//LogCatに出力する場合
    window.interfaceName.viewOut(",HTMLからのデータ");//TextViewに表示する場合
   }
  </script>

 </head>
 <body>
  <div>
   ここはHTMLで表示
  </div>
  <div id="test"></div>
 </body>
</html>
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.TextView;
import android.widget.Toast;

public class HtmlViewActivity extends Activity {
 private WebView webview;
 private Handler mHandler = new Handler();
 /** Called when the activity is first created. */
    @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  
  //webview = new WebView(this);
        webview = (WebView) findViewById(R.id.webView1);
 
  webview.setWebViewClient(new WebViewClient() {});

  // JavaScriptを有効にする
  webview.getSettings().setJavaScriptEnabled(true);
  
  // JavaScriptにJavaオブジェクトを登録する
     // 第2引数で指定した名前で、Javascriptからオブジェクトにアクセスできます。
  webview.addJavascriptInterface(new className(this), "interfaceName");

  //ページ読み込み完了時の処理
  webview.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url)
        {
        //ページ読み込み後データ送信
         String script = "javascript:anFunc('5');";
            webview.loadUrl( script );//②
        }
    });

  //ページを読み込み
  webview.loadUrl("file:///android_asset/test3.html");//①


  //setContentView(webview);
    }
 
/*
⑤ HTMLからのデータ処理
*/
 public class className {
  private Context con;
  
  public className(HtmlViewActivity htmlViewActivity) {
   // TODO 自動生成されたコンストラクター・スタブ
    this.con = htmlViewActivity;
  }
  //Tostを表示する場合
  public void makeToast() {
      Toast.makeText(con, "Tost表示", Toast.LENGTH_LONG).show();
  }
  //LogCatに出力する場合
  public void logOutput(String text) {
    Log.d("LOG", text);//
  }
  //TextViewに表示する場合
  public void viewOut(final String text) {
   final TextView textView = (TextView) findViewById(R.id.textView1);
   //textView.append(text);//error
   mHandler.post(new Runnable() {
    public void run() {
     // TODO 自動生成されたメソッド・スタブ
     textView.append(text);//OK
    }
   });
  }

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



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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="false"
        android:text="ここはTextView" />

</LinearLayout>

関連記事

0 件のコメント:

コメントを投稿