0
点赞
收藏
分享

微信扫一扫

WebView JS与app本地方法互相调用


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()消息

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的情况

.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示例代码​​


举报

相关推荐

0 条评论