2013年10月15日 星期二

Android WebView 基本設置 資料互傳

本單元要來實現 webView java 與 html 資料傳遞功能
小的我第一次使用 webView 如果有更好的寫法歡迎討論

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="wrap_content"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical" >

    <WebView
     android:id="@+id/webview"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"/>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal" >
        
        <Button
            android:id="@+id/ok"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="確定" />
        
        <Button
            android:id="@+id/auth"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="返回" />
    </LinearLayout>
</LinearLayout>

java
public class MainActivity extends Activity {
WebView myBrowser;
@SuppressWarnings("deprecation")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

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

webView.setBackgroundColor(0);
webView.addJavascriptInterface(new setMessage(), "javaScriptCallJava");   @1
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("file:///android_asset/cardInfo/cardInfo.html");
 
}

private class setMessage{
public String title() throws JSONException{
return "Title Test";
}
public String message() throws JSONException{
return "Message";
}
}
    }  
}

html

<head>
<script type="text/javascript">
function setMessageText(){
<!--這邊的javaScriptCallJava對應java中 @1 -->
document.getElementById('title').innerHTML = javaScriptCallJava.title();  
document.getElementById('message').innerHTML = javaScriptCallJava.message();
}
</script>
</head>
<body onload="setMessageText();">
<table align="center" valign="center">
<tr>
<td align="center" valign="center">
<h1 id="title" style="color:#FFF">MoneyCoin</h1>
</td>
</tr>
<tr>
<td align="center" valign="center">
<h3 id="message" style="color:#FFF">MoneyCoin</h3>
</td>
</tr>
</table>
</body>
</html>

如果要使webView抓到javascript傳送的值只需要在java的setMessage 中的 public String title() 
改成public String title(String titleMessage) 

然後在javascript的部份 javaScriptCallJava.title();   這句改成你要傳送的值javaScriptCallJava.title("sendMessage");

這麼一來,在public String title(String titleMessage)中就可使用titleMessage