首先是网页：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<title>js和android相互调用</title>
<head>
<script type="text/javascript" language="javascript">
//调用java方法jsCallJava()
function showHtmlcallJava() {
var str = window.android.jsCallJava()
document.getElementById("info1").value = str
}
//调用java方法jsCallJavaWithParams(String var)，带参数
function showHtmlcallJava2() {
var str = window.android.jsCallJavaWithParams("Devin Chen")
document.getElementById("info2").value = str
}
//提供给java调用的方法
function show() {
document.getElementById("id_input").value = "Java调用Html中的方法"
}
//提供给java调用的方法，带参数
function showWithParam(param) {
document.getElementById("id_input2").value = "Java调用Html中的方法: " + param
}
</script>
</head>
<body>
<input id="info1" style="width: 90%" type="text" value="null" /><br>
<input type="button" value="Html调用Java方法" onclick="showHtmlcallJava()" /><br>
<input id="info2" style="width: 90%" type="text" value="null" /><br>
<input type="button" value="Html调用带参数的Java方法" onclick="showHtmlcallJava2()" /><br>
<input id="id_input" style="width: 90%" type="text" value="null" /><br>
<input type="button" value="Java调用Html方法" onclick="window.android.javaCallJavaScript()" /><br>
<input id="id_input2" style="width: 90%" type="text" value="null" /><br>
<input type="button" value="Java调用带参数的Html方法" onclick="window.android.javaCallJavaScriptWithParams()" />
</body>
</html>
Android部分的布局就一个WebView，MainActivity源代码：
/*** java方法和javascript方法的相互调用
*/
public class MainActivity extends AppCompatActivity {
private static final String url = "http://192.168.0.100:8080/server"
private WebView mWebView
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
initView()
}
private void initView() {
mWebView = (WebView) findViewById(R.id.web_main)
WebSettings settings = mWebView.getSettings()
settings.setJavaScriptEnabled(true)
settings.setDefaultTextEncodingName("utf-8")
mWebView.loadUrl(url)
mWebView.setWebViewClient(new WebViewClient())
//这两句是必须的,"android"就是jsp中调用方法时window后面的对象
Object obj = getObject()
mWebView.addJavascriptInterface(obj, "android")
}
private Object getObject() {
Object obj = new Object() {
/**
* html中的JavaScript调用Java方法
* 注解是必须的
* @return
*/
@JavascriptInterface
public String jsCallJava() {
return "JavaScript调用Java方法"
}
/**
* html中的JavaScript调用带参数的Java方法
* 注解是必须的
* @return
*/
@JavascriptInterface
public String jsCallJavaWithParams(String var) {
return "JavaScript调用带参数的Java方法" + var
}
/**
* java调用html中的方法,遗憾的是不知道有什么办法可以拿到返回值
*/
@JavascriptInterface
public void javaCallJavaScript() {
runOnUiThread(new Runnable() {
@Override
public void run() {
mWebView.loadUrl("javascript:show()")
}
})
}
/**
* java调用html中的方法，并且传递参数,这个有大用
*/
@JavascriptInterface
public void javaCallJavaScriptWithParams() {
runOnUiThread(new Runnable() {
@Override
public void run() {
mWebView.loadUrl("javascript:showWithParam('baoge')")
}
})
}
}
return obj
}
}
实现javascript中调用java类中的方法如下：只要调用addJavascriptInterface方法即可映射一个Java对象到JavaScript对象上。
1、映射Java对象到JavaScript对象上
代码如下:
mWebView = (WebView) findViewById(R.id.wv_content)
mWebView.setVerticalScrollbarOverlay(true)
final WebSettings settings = mWebView.getSettings()
settings.setSupportZoom(true)
//WebView启用Javascript脚本执行
settings.setJavaScriptEnabled(true)
settings.setJavaScriptCanOpenWindowsAutomatically(true)
//映射Java对象到一个名为”js2java“的Javascript对象上
//JavaScript中可以通过"window.js2java"来调用Java对象的方法
mWebView.addJavascriptInterface(new JSInvokeClass(), "js2java")
代码如下:
/**网页Javascript调用接口**/
class JSInvokeClass {
public void back() {
activity.finish()
}
}
2、JavaScript调用Java对象示例
调用上述JSInvokeClass类对象的back方法，如下：
window.js2java.back()
一般的浏览器中是无法通过js调用本地java程序的，但是可以调用嵌入到网页的applet的方法。交互方式如下：
<applet codebase = "." width = "400" height = "400"name= "MyApplet" code = "test.applets.MyApplet1.class">
<script>
// js访问applet属性：document.appletName.appletField (属性必须是public的)
// js访问Applet方法：document.appletName.appletMethod (方法必须是public的)
function showLable{
// 调用test.applets.MyApplet1类的invokeByJS方法
document.applets["MyApplet"].invokeByJS('myvalue')
}
</script>
