首先应该在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; 50%;"> <input type="text" style=" 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>
比较简单方便