Android WebView与JS交互指南
本文详细介绍如何在Android应用中使用WebView与JavaScript进行双向通信，包括布局代码、Activity代码及网页代码实例，实现从Java调用JS和从JS调用Java的功能。
https://blog.youkuaiyun.com/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>
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
