https://blog.csdn.net/books1958/article/details/44747045
Android:WebView与Javascript交互(相互调用参数、传值)
2015年03月30日 10:32:13
阅读数:20273
Android中可以使用WebView加载网页,同时Android端的java代码可以与网页上的javascript代码之间相互调用。
效果图:
(一)Android部分:
布局代码:
-
<LinearLayout xmlns: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代码:
-
/**
-
* Android WebView 与 Javascript 交互。
-
*/
-
public class MainActivity extends ActionBarActivity {
-
private WebView webView;
-
@SuppressLint({"SetJavaScriptEnabled", "AddJavascriptInterface"})
-
@Override
-
protected void onCreate(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(new JsInterface(this), "AndroidWebView");
-
//添加客户端支持
-
webView.setWebChromeClient(new WebChromeClient());
-
}
-
private class JsInterface {
-
private Context mContext;
-
public JsInterface(Context context) {
-
this.mContext = context;
-
}
-
//在js中调用window.AndroidWebView.showInfoFromJs(name),便会触发此方法。
-
@JavascriptInterface
-
public void showInfoFromJs(String name) {
-
Toast.makeText(mContext, name, Toast.LENGTH_SHORT).show();
-
}
-
}
-
//在java中调用js代码
-
public void sendInfoToJs(View view) {
-
String msg = ((EditText) findViewById(R.id.input_et)).getText().toString();
-
//调用js中的函数:showInfoFromJava(msg)
-
webView.loadUrl("javascript:showInfoFromJava('" + msg + "')");
-
}
-
}
(二)网页代码:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<meta http-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>
-
<input id = "name_input" class = "inputStyle" type="text"/>
-
<a class = "rect" onclick="sendInfoToJava()">JS调用Java</a>
-
<script>
-
function sendInfoToJava(){
-
//调用android程序中的方法,并传递参数
-
var name = document.getElementById("name_input").value;
-
window.AndroidWebView.showInfoFromJs(name);
-
}
-
//在android代码中调用此方法
-
function showInfoFromJava(msg){
-
alert("来自客户端的信息:"+msg);
-
}
-
</script>
-
</body>
-
</html>