Android使用WebView和JS互相调用

16lz 2022-06-06

Android调用JS方法有2种

使用webView的loadUrl()方法
使用webView的evaluateJavascript()方法

JS调用Android的方法有3种

通过WebView的addJavascriptInterface（）进行对象映射
通过 WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url
通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截JS对话框alert()、confirm()、prompt（）消息

Android调用JS

使用webview.loadUrl()方法

//打开交互权限webSettings.setJavaScriptEnabled(true);

不传参
这是一段js代码,function是一个alert弹框

// 文本名：javascript               Carson_Ho// JS代码

Java中使用webView直接loadUrl()

 webView.loadUrl("javascript:javaCallJs()");

传参

// 文本名：javascript               Carson_Ho// JS代码

注意: 使用webView调用js代码时,注意js需要的参数拼接格式,双引号后面外层要包一层单引号

javascript:callJsWithParams('" + type + "','" + filePath + "')";

使用webview.evaluateJavascript()方法,注意这个方法是4.4以上才支持

// 只需要将第一种方法的loadUrl()换成下面该方法即可    mWebView.evaluateJavascript（"javascript:callJS()", new ValueCallback() {        @Override        public void onReceiveValue(String value) {            //此处为 js 返回的结果        }    });}

JS调用Android代码

使用webView.addJavascriptInterface()方法实现JS调用Android

在webView中将JSTest的对象映射到js的Android对象上,这一步必须要这么写,至于后面的"Android",这个是跟JS后台约定好的需要映射的对象名称

//打开交互权限 webSettings.setJavaScriptEnabled(true);//  在webView中添加如下代码 mWebView.addJavascriptInterface(new webAppInterface(), "Android")

在webView中创建这个类,并在方法上使用@JavascriptInterface注解,注意这个回调需要在子线程

 public class webAppInterface{        @JavascriptInterface        public void JSTest() {            webView.post(() -> //js调用Android的回调);        }

js代码, 注意:window.Android就是约定好的映射的对象名称,JSTest是js调用的方法名称,这两个不能乱写,否则Android就不能响应JS的事件,这个坑,做项目的时候在这里一度懵逼了很久,果然细节决定成败...

function doJsTest(type) {    console.log(type);     window.Android.JSTest(type);}

其他几个方法后续更新...

更多相关文章

随机推荐