红色标注是js调android 绿色标识是android调js 相信看完这篇文章就能明白Android与JS互调是怎么一回事了!!!
首先写JS调Android:
先上Android代码
wv_web = (WebView) view.findViewById(R.id.wv_web);
bt = (Button) view.findViewById(R.id.bt);
WebSettings settings = wv_web.getSettings();
settings.setBuiltInZoomControls(true);
settings.setSupportZoom(true);
settings.setJavaScriptEnabled(true);
settings.setDefaultFontSize(15);
wv_web.loadUrl("file:///android_asset/test.html");
wv_web.addJavascriptInterface(new JSToast(context), "JSADD"); JSADD是我们在js中调用Android方法的标识
标红的这一行是js调Android的关键 new出来的这个类是我们自己写的(例如下面代码) 如果我们想在js里面调javaScriptInter这个方法 我们就需要JSADD.javaScriptInter即可
public class JSToast {
private Context context;
public JSToast(Context context) {
super();
this.context = context;
}
@JavascriptInterface 这个必须要加
public void javaScriptInter(String name) {
Toast.makeText(context, name, 0).show();
}
}
下面上js代码 让我们看看js到底是怎么调Android代码的
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#image {
height: 150px;
width: 150px;
}
</style>
<script type="text/javascript">
function isSelect() {
var cb = document.getElementById('mbox');
if(cb.checked) {
div2.style.display = 'none';
} else {
div2.style.display = 'block';
}
}
function Android() { 这里就是js调Android的代码 就是用我们在android里面写的那个标识JSADD调外部类里面的方法javaScriptInter
JSADD.javaScriptInter("吐死吐死吐死");
}
function toJS(param){
document.getElementById('fromJS').innerText = param; 这里是我拿到Android传过来的param设置给fromJS这个div 值得一提的是 方法里面还可以再调js里面的方法
Android();
}
</script>
</head>
<body>
<div id="div1">
<input type="checkbox" align="center" id="mbox" onchange="isSelect()" />
<span id="text">
点击隐藏图片
</span>
</div>
<div id="div2">
<img src="img/111.png" id="image" />
</div>
<div id="div3" >
<input type="button" name="button" id="button" value="我是JS的button,点我调用安卓代码" onclick="Android()" /> 这里是js的一个按钮 点击之后调Android这个方法
</div>
<div id="div4" style="position: relative;top: 10px; ">
<a href="http://www.baidu.com">点我跳转到百度页面</a>
</div>
<div id="fromJS">
</div>
</body>
</html>
js调android效果图
下面是android调JS
上Android代码
bt.setOnClickListener(new OnClickListener() { 这里就是一个button点击执行js代码
@Override
public void onClick(View v) {
wv_web.loadUrl("javaScript:toJS('上天!!')"); 这里的javaScript:是固定写法 后面的toJS是js里面的 方法
}
});
这里是js调安卓效果 js页面出现了上天!!同时出现了我们的:吐死吐死吐死