android调h5方法,Android与H5互调简析

均属于笔记，仅供个人参考，有问题欢迎指正

一，java调用JavaScript

1，初始化WebView并且加载网络页面

private voidinitWebView() {

webView= newWebView(this);

WebSettings webSettings =webView.getSettings();

//设置支持javaScript脚步语言

webSettings.setJavaScriptEnabled(true);

//支持双击-前提是页面要支持才显示

webSettings.setUseWideViewPort(true);

//支持缩放按钮-前提是页面要支持才显示

webSettings.setBuiltInZoomControls(true);

//设置客户端-不跳转到默认浏览器中

webView.setWebViewClient(newWebViewClient());

//加载网络资源

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相关

function javaCallJs(){

document.getElementById("content").innerHTML +=    "
java调用了js无参函数";

}

/** 被调用的方法 */

function javaCallJs(arg){

document.getElementById("content").innerHTML = ("欢迎："+arg );

}

function showDialog(){

alert("你好,我是来自javascript");

}

3，Java调用javaScript

/**

* Java调用javaScript

*@paramnumebr，注意调用方式

*/

private voidlogin(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

4，解决该WebView.addJavascriptInterface接口不起作用的两种办法

1_针对版本改成16

defaultConfig {

targetSdkVersion 16

}

2_在JavaScript接口类的方法加上@JavascriptInterface注解

/**

* js可以调用该类的方法

*/

class AndroidAndJSInterface{

@JavascriptInterface

public voidshowToast(){

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);

WebSettingswebSettings = 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

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);

}

}

四，示例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等方法

function show(jsondata){

var jsonobjs = eval(jsondata);

var table = document.getElementById("personTable");

for(var y=0; 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 = ""+ jsonobjs[y].phone+ "";

}

}

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 = ""+ jsonobjs[y].phone+ "";

}

3，js调用java

td2.innerHTML = ""+ jsonobjs[y].phone+ "";

4，大体流程

html中在body加载的时候调用了Java中的showcontacts方法(前面的Android要和java中的保持一致)，java中的showcontacts方法又调用了js中的show方法(webView.loadUrl("javascript:show('" + json + "')");)，记得参数用引号括起来，js中的show方法接着调用java中的call方法。