Android程序中Web页面和NativeCode交互

浏览数：19 / 时间：2015年06月11日

首先应该在AndroidManifest.xml把下面这个加上使得具有网络访问权限

<uses-permission android:name="android.permission.INTERNET"/>

然后在布局文件上插入WebView main.xml

<?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="match_parent"
        android:layout_weight="1" />
    
    <LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:layout_weight="1">
     <TextView
        
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"       
        android:textAppearance="?android:attr/textAppearanceLarge" />
   </LinearLayout>
</LinearLayout>

本地Code 创建一个JavaScriptInterface的实例

final JavaScriptInterface myJavaScriptInterface = new JavaScriptInterface(this);

然后添加接口

Wv.addJavascriptInterface(myJavaScriptInterface, "AndroidFunction");

这个Wv是WebView实例 AndroidFunction 是在HTML页面上用到的JavaScript 的function

我们在html中调用AndroidFunction的时候就可以用变换到本地代码了

Java的全部代码如下

package my.demo;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.os.Handler;
import android.webkit.WebView;
import android.widget.TextView;
import android.widget.Toast;


public class JavaScriptInterfaceDemoActivity extends Activity {
    private WebView Wv;
    private TextView myTextView;    
    final Handler myHandler = new Handler();
    
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
       
        setContentView(R.layout.main);
        Wv = (WebView)findViewById(R.id.webView1);
        myTextView = (TextView)findViewById(R.id.textView1);        
        final JavaScriptInterface myJavaScriptInterface
         = new JavaScriptInterface(this);         
         
        Wv.getSettings().setLightTouchEnabled(true);
        Wv.getSettings().setJavaScriptEnabled(true);
        Wv.addJavascriptInterface(myJavaScriptInterface, "AndroidFunction");
        Wv.loadUrl("file:///android_asset/www/index.html"); 
    }
    
    public class JavaScriptInterface {
        Context mContext;

        JavaScriptInterface(Context c) {
            mContext = c;
        }
        
        public void showToast(String webMessage){            
            final String msgeToast = webMessage;            
             myHandler.post(new Runnable() {
                 @Override
                 public void run() {
                     // This gets executed on the UI thread so it can safely modify Views
                     myTextView.setText(msgeToast);
                 }
             });

           Toast.makeText(mContext, webMessage, Toast.LENGTH_SHORT).show();
        }
    }
}

html页面如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8" />
        <meta name="viewport" 
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="viewport" content="target-densitydpi=device-dpi" />
        <script type="text/javascript">
           function init()
           {
               var testVal = document.getElementById(‘mytextId‘).value;
               AndroidFunction.showToast(testVal);
           }
        </script>
    </head>
    <body>        
        <div style="float: left;width: 50%;">
           <input type="text" style="width: 180px;" 
                   name="myText" id="mytextId" />
           
        </div>
        <div style="clear: both;height: 3px;"> </div>
        <div>
          <input value="submit" type="button" name="submit" 
            id="btnSubmit" onclick="javascript:return init();" /> 
        </div>  
    </body>
</html>