HTML(JavaScript)与Android的webView控件相互通信,今天仔细研究才发现,这两者相互调用是非常简单的,只需要在Android里面调用JavaScript的方法,以及在JavaScript里面调用Android里面的方法即可完成,思路很简单,具体执行起来其实也并不复杂,下面是具体的代码,以及代码注释:
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Android端与HTML相互通信</title>
<style type="text/css">
这里的层叠样式表就省略了因为对接下的
来的代码没有任何关系
</style>
</head>
<body>
<h2>Android与HTML相互通信示例</h2>
<--!h2标签说明-->
<div id="xiahuaxian"></div>
<h3 id="zza">Android消息</h3>
在此处输入想要发送到Android端的信息
<br><input type="text" id="usernameId" ;/>
在这里设置一个文本框,用来获取用户输入的文字消息然后应用到js里面进操作
<button onclick="setUsername()">点击发送到Android端消息</button>
<input type="button" id="btn" value="点击接收来自Android端的消息">
<script>
//给HTML里面的按钮绑定点击事件,方法的内容是
//关联一个标签,并将Android端的user类里面的getUSername方法调用,并传值
document.querySelector('input[type=button]').onclick =function () {
var h3 = document.getElementById("zza");
h3.innerHTML ="Android的消息是:"+window.user.getUsername();
//这里的window就是调用Android里面的java方法
}
//此方法使将HTML里面的文本框的内容直接调用Android里面的setUsername进行传值
//并弹窗
function setUsername() {
var input = document.getElementById("usernameId").value;
if (input == "") {
alert("内容不能为空!");
return;
} else {
alert(input);
//与android端交互 将数据input提交到android端 --->user是将android本地的对象传递过来的,调用andorid端定义的方法<span style="font-family: Arial, Helvetica, sans-serif;">setUsername()</span>
window.user.setUsername(input);
}
}
</script>
</body>
</html>
//导包略过
public class MainActivity extends Activity {
private WebView webView;
private EditText editText;
private Button button;
private TextView textView;
//定义好所需要的控件
@SuppressLint("JavascriptInterface")
//定义好SuppressLint("JavascriptInterface")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ByID();
//设置支持JavaScript语言,让WebView支持javascript的动作
webView.getSettings().setJavaScriptEnabled(true);
//交互对象的添加,传入对象在html5界面的javascript中获取,该对象用于两者之间的交互。question,给JavaScript添加一个与之交互的接口,传入一个对象和该对象的名字,在html5端根据这个名字得到对象
//提供一个供h5交互的对象,并给对象标记个名字供js识别
webView.addJavascriptInterface( mUser= new User(), "user");
//自定义实现alert
//要加载的页面
webView.loadUrl("http://10.0.2.2:63343/WWW/PHPwithHTML/test.html");
webView.setWebViewClient(new zzaWebViewClient());
}
public void ByID(){
//关联ID
webView = findViewById(R.id.webView);
textView=findViewById(R.id.textView);
button=findViewById(R.id.button);
editText=findViewById(R.id.editText);
}
public class User {
//在user类里面写两个方法供js调用
//一定要在每一个方法前面加入 @JavascriptInterface
private String username;
@JavascriptInterface
public String getUsername() {
//此方法直接返回AndroidUI页面里面的文本框的值
return editText.getText().toString();
}
@JavascriptInterface
public void setUsername(String username) {
this.username = username;
//将js里面传过来的值直接添加到UI页面的文本信息之中
textView.append(username+"\n");
Log.i("TAG", username);
}
}
class zzaWebViewClient extends WebViewClient{
//不重新打开系统的浏览器加载网页
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
}
}
效果图:
JavaScript---->Android
Android----->JavaScript