Android中可以使用WebView加载网页,同时Android端的java代码可以与网页上的javascript代码之间相互调用。
(一)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">
android:layout_width="match_parent"
android:layout_height="wrap_content">
android:id="@+id/input_et"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:singleLine="true"
android:layout_weight="1"
android:hint="请输入信息"/>
android:text="Java调用JS"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInfoToJs"/>
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
Activity代码:
/**
* 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 +"')");
}
}
(二)网页代码:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Android WebView 与 Javascript 交互
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}
测试Android WebView 与 Javascript 交互
JS调用Java
functionsendInfoToJava(){
//调用android程序中的方法,并传递参数
varname =document.getElementById("name_input").value;
window.AndroidWebView.showInfoFromJs(name);
}
//在android代码中调用此方法
functionshowInfoFromJava(msg){
alert("来自客户端的信息:"+msg);
}