WebView JS与app本地方法互相调用
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
首先要打开交互权限
//允许使用javascript
webSettings.setJavaScriptEnabled(true);
html页面
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>
java调用js
</title>
</head>
<body>
<p id="content"></p>
<h1>Hello World!这是java调用JS</h1>
</body>
<script>
// Android需要调用的方法
function javaCallJs(){
alert("Android调用了JS的无参方法");
}
// Android需要调用的方法
function callJsWithParams(data){
alert(data);
}
function callJs(){
return "Hello，I am your boss";
}
function callJsWithParams(data){
return data+",my dear friend";
}
</script>
</html>
1.通过webView的loadUrl()方法
//无参
mWebview.loadUrl("javascript:javaCallJs()");
//带参
mWebview.loadUrl("javascript:callJsWithParams(" + "'android正在调用带参的JS方法'" + ")");
2.使用webview.evaluateJavascript()方法,注意这个方法是4.4以上才支持，这种方式特别适合需要js方法返回值给app的情况
mWebview.evaluateJavascript("javascript:callJs()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此处为 js 返回的结果
Toast.makeText(MainActivity.this,value,Toast.LENGTH_SHORT).show();
}
});
mWebview.evaluateJavascript("javascript:callJsWithParams('Bye Bye')", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此处为 js 返回的结果
Toast.makeText(MainActivity.this,value,Toast.LENGTH_SHORT).show();
}
});
JS调用Android
首先在android打开交互权限：
//打开交互权限
webSettings.setJavaScriptEnabled(true);
html页面
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>
java调用js
</title>
</head>
<body>
<p id="content"></p>
<h1>Hello World!这是js调用android</h1>
<button onclick="jsCallAndroid()">Js调用Android</button>
</body>
<script>
function jsCallAndroid(){
//Js调用Android的方法
AndroidNativeMethod.sendDataToAndroid("I am from js");
}
</script>
</html>
1. 通过WebView的addJavascriptInterface()方法进行对象映射
(1)首先进行对象的映射，如JSInterface对象映射到AndroidNativeMethod：
// 在webView中添加如下代码,AndroidNativeMeth将会在js中被用来调用app的方法
mWebview.addJavascriptInterface(new JSInterface(),"AndroidNativeMethod");
（2）在webView中创建这个JSInterface类,并在方法上使用@JavascriptInterface注解,注意这个回调需要在子线程：
public class JSInterface{
@JavascriptInterface
public void sendDataToAndroid(String data){
Toast.makeText(MainActivity.this,data,Toast.LENGTH_SHORT).show();
}
}
（3）js调用android的方法，注意AndroidNativeMethod就是约定好的映射对象名称：
function jsCallAndroid(){
//Js调用Android的方法
AndroidNativeMethod.sendDataToAndroid("I am from js");
}
2. 通过WebViewClient的shouldOverrideUrlLoading()方法回调拦截url
//加上下面这段代码可以使网页中的链接不以浏览器的方式打开
mWebview.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
return super.shouldOverrideUrlLoading(view, request);
}
});
3. 通过WebChromeClient的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt()消息
//允许alert弹出
mWebview.setWebChromeClient(new WebChromeClient(){
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
return super.onJsAlert(view, url, message, result);
}
@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
return super.onJsPrompt(view, url, message, defaultValue, result);
}
@Override
public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
return super.onJsConfirm(view, url, message, result);
}
});
谢谢阅读
demo示例代码