说明:
本文主要介绍安卓和JavaScript的交互:js调用安卓有参、js调用安卓无参、安卓调用js有参、安卓调用js无参
一、JS调用Android并传参
Android代码
public class MainActivity extends Activity {
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.webView);
//设置WebView支持JavaScript
webView.getSettings().setJavaScriptEnabled(true);
String url = "http://xxx.html";
webView.loadUrl(url);
//在js中调用本地java方法
webView.addJavascriptInterface(new JsInterface(), "AndroidWebView");
//添加客户端支持
webView.setWebChromeClient(new WebChromeClient());
}
private class JsInterface {
public JsInterface() {
}
//在js中调用window.AndroidWebView.showInfoFromJs(name),便会触发此方法。
@JavascriptInterface
public void showInfoFromJs(String name) {
//TODO 本地方法
}
}
}
JS代码
<!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" οnclick="sendInfoToJava()">JS调用Java</a>
<script>
function sendInfoToJava(){
//调用android程序中的方法,并传递参数
var name = document.getElementById("name_input").value;
window.AndroidWebView.showInfoFromJs(name);
}
</script>
</body>
</html>
二、JS调用Android不传参
Android代码
private class JsInterface {
public JsInterface() {
}
//在js中调用window.AndroidWebView.showInfoFromJs(name),便会触发此方法。
@JavascriptInterface
public void showInfoFromJs() {
//TODO 本地方法
}
}
JS代码
<script>
function sendInfoToJava(){
//调用android程序中的方法,无参数
window.AndroidWebView.showInfoFromJs();
}
</script>
三、Android调用js并传参
Android代码
public class MainActivity extends Activity {
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.webView);
//设置WebView支持JavaScript
webView.getSettings().setJavaScriptEnabled(true);
String url = "http://xxx.html";
webView.loadUrl(url);
//添加客户端支持
webView.setWebChromeClient(new WebChromeClient());
}
//button点击事件
public void sendInfoToJs(View view) {
String msg = ((EditText) findViewById(R.id.input_et)).getText().toString();
//调用js中的函数:showInfoFromJava(msg)
webView.loadUrl("javascript:showInfoFromJava('" + msg + "')");
}
}
JS代码
<script>
//android代码调用此方法
function showInfoFromJava(msg){
alert("来自客户端的信息:"+msg);
}
</script>
四、Android调用js不传参
Android代码
//button点击事件
public void sendInfoToJs(View view) {
//调用js中的函数:showInfoFromJava(msg)
webView.loadUrl("javascript:showInfoFromJava()");
}
JS代码
<script>
//android代码调用此方法
function showInfoFromJava(){
alert("来自客户端的调用");
}
</script>
注意:
Android调用js方法,如果在oncreate方法中调用,js是不会执行的,需要延迟加载,哪怕只是1毫秒
webview.postDelayed(new Runnable() {
@Override
public void run() {
webview.loadUrl("javascript:showInfoFromJava();
}
}, 1);