android webview js 交互案例,Android WebView系列文章2-WebView和js交互

目录介绍

1.WebView和Js交互方式

2.Android调用JS脚本

3.JS调用Android方法

4.Android 调用HTML中的javascript脚本并传递参数

5.HTML中的javascript脚本调用Android本地代码并传递参数

6.案例：H5页面点击图片监听图片链接地址

好消息

博客笔记大汇总【16年3月到至今】，包括Java基础及深入知识点，Android技术博客，Python学习笔记等等，还包括平时开发中遇到的bug汇总，当然也在工作之余收集了大量的面试题，长期更新维护并且修正，持续完善……开源的文件是markdown格式的！同时也开源了生活博客，从12年起，积累共计47篇[近20万字]，转载请注明出处，谢谢！

如果觉得好，可以star一下，谢谢！当然也欢迎提出建议，万事起于忽微，量变引起质变！

1.WebView和Js交互的几种方式

Android去调用JS的代码

JS去调用Android的代码

对于android调用JS代码的方法有2种：

1. 通过WebView的loadUrl()

2. 通过WebView的evaluateJavascript()

对于JS调用Android代码的方法有3种：

1. 通过WebView的addJavascriptInterface()进行对象映射

2. 通过 WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url

3. 通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt()消息

2. Android调用JS脚本

对于Android调用JS代码的方法有2种：

- 通过WebView的loadUrl()

- 通过WebView的evaluateJavascript()

**通过WebView的evaluateJavascript()**

优点：该方法比第一种方法效率更高、使用更简洁。

1. 因为该方法的执行不会使页面刷新，而第一种方法(loadUrl )的执行则会。

2. Android 4.4 后才可使用

//只需要将第一种方法的loadUrl()换成下面该方法即可

mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback() {

@Override

public void onReceiveValue(String value) {

//此处为 js 返回的结果

}

});

**通过WebView的loadUrl()**

直接Webview调用loadUrl方法，里面是JS的方法名，并可以传入参数，javascript：xxx()方法名需要和JS方法名相同

contentWebView.loadUrl("javascript:javacalljs()");

HTML代码

Paste_Image.png

使用建议

两种方法混合使用，即Android 4.4以下使用方法1，Android 4.4以上方法2

//Android版本变量

final int version = Build.VERSION.SDK_INT;

//因为该方法在 Android 4.4 版本才可使用，所以使用时需进行版本判断

if (version < 18) {

mWebView.loadUrl("javascript:callJS()");

} else {

mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback() {

@Override

public void onReceiveValue(String value) {

//此处为 js 返回的结果

}

});

}

3. JS调用Android方法

在Java代码中添加下面这句，webview绑定javascriptInterface，js脚本通过这个接口来调用java代码， 第一个参数是自定义类对象，映射成JS对象，这里我直接传this，第二个参数是别名，JS脚本通过这个别名来调用java的方法，这个别名跟HTML代码中也是对应的。

contentWebView.addJavascriptInterface(MainActivity.this,"android");

HTML代码

Paste_Image.png

4.Android 调用HTML中的javascript脚本并传递参数

WebView.loadUrl("javascript:javacalljswith(" + "'http://blog.csdn.net/Leejizhou'" + ")");

HTML代码

Paste_Image.png

5. HTML中的javascript脚本调用Android本地代码并传递参数

Android Java代码

@JavascriptInterface

public void startFunction(final String text){

runOnUiThread(new Runnable() {

@Override

public void run() {

new AlertDialog.Builder(WebViewFiftyActivity.this).setMessage(text).show();

}

});

}

HTML代码

function javacalljswith(arg){

document.getElementById("content").innerHTML =

("
"+arg);

}

6.案例：H5页面点击图片监听图片链接地址

settings.setJavaScriptEnabled(true);

wv_view.addJavascriptInterface(new ImageJs(this),"imageListener");

/**打开图片js通信接口*/

private class ImageJs {

private final Activity activity;

public ImageJs(Activity activity) {

this.activity = activity;

}

// 下面的@SuppressLint("JavascriptInterface")最好加上。防止在某些版本中js和java的交互不支持。

//@SuppressLint("JavascriptInterface")

@android.webkit.JavascriptInterface

public void openImage(String img) {

Log.i("url地址","图片"+ img);

**//跳转页面**

}

}

/**添加图片点击事件的js代码，网上找到，就是这样写，不需要明白*/

private void addImageClickListner() {

String jsCode="javascript:(function(){" +

"var imgs=document.getElementsByTagName(\"img\");" +

"for(var i=0;i

"imgs[i].οnclick=function(){" +

"window.imageListener.openImage(this.src);" + //imageListener自定义，openImage要与js通信接口相同

"}}})()";

wv_view.loadUrl(jsCode);

}