均属于笔记，仅供个人参考，有问题欢迎指正
一，java调用JavaScript
1，初始化WebView并且加载网络页面
private void initWebView() {
webView = new WebView(this);
WebSettings webSettings =webView.getSettings();
//设置支持javaScript脚步语言
webSettings.setJavaScriptEnabled(true);
//支持双击-前提是页面要支持才显示
webSettings.setUseWideViewPort(true);
//支持缩放按钮-前提是页面要支持才显示
webSettings.setBuiltInZoomControls(true);
//设置客户端-不跳转到默认浏览器中
webView.setWebViewClient(new WebViewClient());
//加载网络资源
webView.loadUrl("http://123.com/teacher.shtml");
// webView.loadUrl("file:///android_asset/JavaAndJavaScriptCall.html");
//显示页面
setContentView(webView);
}
2，在工程main目录下创建assets目录且加载本地资源
webView.loadUrl("file:///android_asset/JavaAndJavaScriptCall.html");
本地资源中js相关
<script type="text/javascript">
function javaCallJs(){
document.getElementById("content").innerHTML += "<br\>java调用了js无参函数";
}
/** 被调用的方法 */
function javaCallJs(arg){
document.getElementById("content").innerHTML = ("欢迎："+arg );
}
function showDialog(){
alert("你好,我是来自javascript");
}
</script>
3，Java调用javaScript
/**
* Java调用javaScript
*@param numebr，注意调用方式
*/
private void login(String numebr) {
webView.loadUrl("javascript:javaCallJs("+" ' "+numebr+" ' "+")");
setContentView(webView);
}
二，JavaScript调java
1，配置Javascript接口
//设置支持js调用java
webView.addJavascriptInterface(new AndroidAndJSInterface(),"Android");
,2，实现Javascript接口类
/**
* js可以调用该类的方法
*/
class AndroidAndJSInterface{
public void showToast(){
Toast.makeText(JavaAndJSActivity.this, "我被js调用了", Toast.LENGTH_SHORT).show();
}
}
3，JavaScript调java
<input type="button" value="点击Android被调用" onclick="window.Android.showToast()" />
4，解决该WebView.addJavascriptInterface接口不起作用的两种办法
1_针对版本改成16
defaultConfig {
targetSdkVersion 16
}
2_在JavaScript接口类的方法加上@JavascriptInterface注解
/**
* js可以调用该类的方法
*/
class AndroidAndJSInterface{
@JavascriptInterface
public void showToast(){
Toast.makeText(JavaAndJSActivity.this, "我被js调用了", Toast.LENGTH_SHORT).show();
}
}
三，示例1，H5页面调用Android播放视频
1，初始化webView，android对应方法
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_js_call_java_video);
webView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = webView.getSettings();
//设置支持javaScript脚步语言
webSettings.setJavaScriptEnabled(true);
//支持双击-前提是页面要支持才显示
// webSettings.setUseWideViewPort(true);
//支持缩放按钮-前提是页面要支持才显示
webSettings.setBuiltInZoomControls(true);
//设置客户端-不跳转到默认浏览器中
webView.setWebViewClient(new WebViewClient());
//设置支持js调用java
webView.addJavascriptInterface(new AndroidAndJSInterface(),"android");
//加载网络资源
webView.loadUrl("file:///android_asset/RealNetJSCallJavaActivity.htm");
}
class AndroidAndJSInterface {
/**
* 该方法将被js调用
*/
@JavascriptInterface
public void playVideo(int id,String videoUrl,String tile){
//调起系统所有播放器
Intent intent = new Intent();
intent.setDataAndType(Uri.parse(videoUrl),"video/*");
startActivity(intent);
}
}
2，js调用java
<script>
var videourl = "http://10.0.2.2:8080/yellow.mp4";
var itemid = "65411";
var itemtitle = "6.9玛尔扎哈OP套路教程";
var obj_play = document.getElementById('play');
if(obj_play != null) {
obj_play.ontouchstart = function() {
javascript:android.playVideo(itemid, videourl, itemtitle);
}
}
</script>
四，示例2，H5页面调用Android拨打电话
1，初始化webView，配置js接口
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_js_call_java_video);
webView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = webView.getSettings();
//设置支持javaScript脚步语言
webSettings.setJavaScriptEnabled(true);
//支持双击-前提是页面要支持才显示
// webSettings.setUseWideViewPort(true);
//支持缩放按钮-前提是页面要支持才显示
webSettings.setBuiltInZoomControls(true);
//设置客户端-不跳转到默认浏览器中
webView.setWebViewClient(new WebViewClient());
//设置支持js调用java
webView.addJavascriptInterface(new AndroidAndJSInterface(), "Android");
//加载本地资源
webView.loadUrl("file:///android_asset/JsCallJavaCallPhone.html");
}
class AndroidAndJSInterface {
/**
* 该方法将被js调用,用于加载数据
*/
@JavascriptInterface
public void showcontacts() {
// 下面的代码建议在子线程中调用
String json = "[{\"name\":\"安保处\", \"phone\":\"18600012356\"}]";
// Java调用JS中的方法
// webView.loadUrl("javascript:show('" + json + "')");
webView.loadUrl("javascript:show1(" + "'" + json + "'" + ")");
}
/**
* 拨打电话
* @param phone
*/
@JavascriptInterface
public void call(String phone) {
Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone));
if (ActivityCompat.checkSelfPermission(JsCallJavaCallPhoneActivity.this, Manifest.permission.CALL_PHONE) != PackageManager.PERMISSION_GRANTED) {
return;
}
startActivity(intent);
}
}
2，在html中配置js调用实现，上面的showcontacts有调用js的show等方法
<script type="text/javascript">
function show(jsondata){
var jsonobjs = eval(jsondata);
var table = document.getElementById("personTable");
for(var y=0; y<jsonobjs.length; y++){
var tr = table.insertRow(table.rows.length);
var td1 = tr.insertCell(0);
var td2 = tr.insertCell(1);
td2.align = "center";
td1.innerHTML = jsonobjs[y].name;
td2.innerHTML = "<a href='javascript:Android.call(\""+ jsonobjs[y].phone+ "\")'>"+ jsonobjs[y].phone+ "</a>";
}
}
function show1(jsondata){
document.getElementById("content").innerHTML =("欢迎："+jsondata );
var table = document.getElementById("personTable");
var tr = table.insertRow(table.rows.length);
var td1 = tr.insertCell(0);
var td2 = tr.insertCell(1);
td2.align = "center";
td1.innerHTML = jsondata.name;
td2.innerHTML = "<a href='javascript:Android.call(\""+ jsondata.phone+ "\")'>"+ jsonobjs[y].phone+ "</a>";
}
</script>
3，js调用java
<body onload="javascript:Android.showcontacts()">
td2.innerHTML = "<a href='javascript:Android.call(\""+ jsondata.phone+ "\")'>"+ jsonobjs[y].phone+ "</a>";
4，大体流程
html中在body加载的时候调用了Java中的showcontacts方法（前面的Android要和java中的保持一致），java中的showcontacts方法又调用了js中的show方法（webView.loadUrl("javascript:show('" + json + "')");），记得参数用引号括起来，js中的show方法接着调用java中的call方法。
网友评论