Android与JS的交互（下）

         本博文共分为Android与JS的交互（上）和Android与JS的交互（下）两篇，上篇主要介绍怎样快速把工程中的jsdemo.html部署到Apache服务器上，对应的软件和代码如下面所附链接，下篇主要介绍安卓客户端和JS的交互。

         文中对应的软件资源下载地址：

          1、apache-tomcat-7.0.6 ： http://download.csdn.NET/detail/u010857510/9546800

          2、JSDemo_Pro：http://download.csdn.net/detail/u010857510/9648021

安卓客户端和JS的交互

一、首先分析一下JS代码

下面分别是四种形式的方法

<script type="text/javascript" language="javascript"> 

function showHtmlcallJava(){
var str = window.jsdemo.HtmlcallJava();
alert(str);
}

function showHtmlcallJava2(){
var str = window.jsdemo.HtmlcallJava2(":欢迎！");
alert(str);
}

function showFromHtml(){
document.getElementById("id_input").value = "JAVA调用HTML网页JS方法";
}

function showFromHtml2( param ){
document.getElementById("id_input2").value = "JAVA调用HTML网页JS带参方法: " + param; 
}
</script>

四种方法对应的按钮代码

body>
<p>这是一个安卓客户端嵌入HTML网页的一个简单调试，HTML网页部署在Apache服务器上，HTML嵌入了JS语言，实现了JS与安卓客户端的交互


<br><br>1、点击按钮一通过JS调用Android的JAVA方法；
<br><input type="button" value="按钮一" onclick="showHtmlcallJava()" />


<br><br>2、点击按钮二通过JS带参调用Android的JAVA方法；
<br><input type="button" value="按钮二" onclick="showHtmlcallJava2()" />


<br>
<br><br>3、点击按钮三调用Android的JAVA方法，JAVA调用HTML网页JS方法；
<br><input id="id_input" style="width: 90%" type="text" value="" />
<br><input type="button" value="按钮三" onclick="window.jsdemo.JavacallHtml()" />


<br><br>4、点击按钮四调用Android的JAVA方法，JAVA调用HTML网页JS带参方法；
<br><input id="id_input2" style="width: 90%" type="text" value="" />
<br><input type="button" value="按钮四" onclick="window.jsdemo.JavacallHtml2()" />


</body>

二、安卓客户端的JAVA和JS交互的代码

首先一定要在安卓清单文件中申请网络权限，不申请的话，你是连接不上上篇中提到的服务器的

 <uses-permission android:name="android.permission.INTERNET" />

显示的WEB界面的是安卓自带的webkit功能WebView，代码如下

@SuppressLint("SetJavaScriptEnabled")
private void showWebView(){
try {
mWebView = new WebView(this);
setContentView(mWebView);
mWebView.requestFocus();
mWebView.setWebChromeClient(new WebChromeClient(){
@Override
public void onProgressChanged(WebView view, int progress){
JSDemo.this.setProgress(progress);
if(progress >= 80) {
JSDemo.this.setTitle("jsdemo Test");
}
}
});

mWebView.setOnKeyListener(new View.OnKeyListener() {// webview can go back
@Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
if(keyCode == KeyEvent.KEYCODE_BACK && mWebView.canGoBack()) {
mWebView.goBack();
return true;
}
return false;
}
});

WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDefaultTextEncodingName("utf-8");


mWebView.addJavascriptInterface(getHtmlObject(), "jsdemo");
mWebView.loadUrl("http://192.168.1.101:8080/jsdemo.html");
} catch (Exception e) {
e.printStackTrace();
}
}

注意倒数第五句代码中mWebView.loadUrl("http://192.168.1.101:8080/jsdemo.html");的192.168.1.101就是你上一篇中查询的IP地址，这里要改成你的IP地址，否则你运行我的程序达不到效果

倒数第六句代码mWebView.addJavascriptInterface(getHtmlObject(), "jsdemo");中getHtmlObject()的代码如下

private Object getHtmlObject(){
@SuppressWarnings("unused")
Object Obj = new Object(){
public String HtmlcallJava(){
return "JS调用Android的JAVA方法";
}

public String HtmlcallJava2(final String param){
return "JS带参调用Android的JAVA方法" + param;
}

public void JavacallHtml(){
runOnUiThread(new Runnable() {
@Override
public void run() {
mWebView.loadUrl("javascript: showFromHtml()");
}
});
}

public void JavacallHtml2(){
runOnUiThread(new Runnable() {
@Override
public void run() {
mWebView.loadUrl("javascript: showFromHtml2('欢迎！')");
}
});
}
};
return Obj;
}

具体细节请下载文中一开始所附的链接，具体就不详细讲了，附几张效果图结束本文