Android：WebView与Javascript交互（相互调
Android中可以使用WebView加载网页，同时Android端的java代码可以与网页上的javascript代码之间相互调用。
效果图：
（一）Android部分：
布局代码：
[html]view plaincopy
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:focusableInTouchMode="true"
android:orientation="vertical"
android:padding="8dp"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/input_et"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:singleLine="true"
android:layout_weight="1"
android:hint="请输入信息"/>
<Button
android:text="Java调用JS"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInfoToJs"/>
</LinearLayout>
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
Activity代码：
[java]view plaincopy
/**
* Android WebView 与 Javascript 交互。
*/
publicclassMainActivityextendsActionBarActivity {
privateWebView webView;
@SuppressLint({"SetJavaScriptEnabled","AddJavascriptInterface"})
@Override
protectedvoidonCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.webView);
webView.setVerticalScrollbarOverlay(true);
//设置WebView支持JavaScript
webView.getSettings().setJavaScriptEnabled(true);
String url ="http://192.168.1.27/js_17_android_webview.html";
webView.loadUrl(url);
//在js中调用本地java方法
webView.addJavascriptInterface(newJsInterface(this),"AndroidWebView");
//添加客户端支持
webView.setWebChromeClient(newWebChromeClient());
}
privateclassJsInterface {
privateContext mContext;
publicJsInterface(Context context) {
this.mContext = context;
}
//在js中调用window.AndroidWebView.showInfoFromJs(name)，便会触发此方法。
@JavascriptInterface
publicvoidshowInfoFromJs(String name) {
Toast.makeText(mContext, name, Toast.LENGTH_SHORT).show();
}
}
//在java中调用js代码
publicvoidsendInfoToJs(View view) {
String msg = ((EditText) findViewById(R.id.input_et)).getText().toString();
//调用js中的函数：showInfoFromJava(msg)
webView.loadUrl("javascript:showInfoFromJava('"+ msg +"')");
}
}
（二）网页代码：
[html]view plaincopy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<metahttp-equiv="Content-Language"content="zh-cn"/>
<title>Android WebView 与 Javascript 交互</title>
<head>
<style>
body {background-color:#e6e6e6}
.rect
{
color:white;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
width:100px;
padding:6px;
background-color:#98bf21;
text-decoration:none;
text-align:center;
border:none;
cursor:pointer;
}
.inputStyle {font-size:16px;padding:6px}
</style>
</head>
<body>
<p>测试Android WebView 与 Javascript 交互</p>
<inputid="name_input"class="inputStyle"type="text"/>
<aclass="rect"onclick="sendInfoToJava()">JS调用Java</a>
<script>
function sendInfoToJava(){
//调用android程序中的方法，并传递参数
varname=document.getElementById("name_input").value;
window.AndroidWebView.showInfoFromJs(name);
}
//在android代码中调用此方法
function showInfoFromJava(msg){
alert("来自客户端的信息："+msg);
}
</script>
</body>
</html>
