随着Html5的崛起，越来越多的App开始引入网页，如现在比较火热的React Native、Cordova等框架，难免我们的项目中会遇到WebView和JavaScript的交互。
首先我们来配置下我们WebView
webview = (WebView) findViewById(R.id.webview);
webview.loadUrl("file:///android_asset/testjs.html");
findViewById(R.id.btn_call_js_no_params).setOnClickListener(this);
findViewById(R.id.btn_call_js_params).setOnClickListener(this);
settings = webview.getSettings();
settings.setJavaScriptEnabled(true);
settings.setJavaScriptCanOpenWindowsAutomatically(true);// 设置允许JS弹窗
webview.setWebChromeClient(new WebChromeClient());
webview.addJavascriptInterface(new AndroidJs(), "JavaScriptObject");//暴露给Js的对象，Js必须引用这个对象调用我们的方法
1.Android调用JavaScript无参方法
js方法
function sendMsg(){
return "Android调用了Js无参函数";
}
Android调用js的sendMsg方法
webview.evaluateJavascript("javascript:sendMsg()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
if (value != null) {
Toast.makeText(MainActivity.this, value, Toast.LENGTH_SHORT).show();
}
}
});
我们通过evaluateJavascript方法调用了JavaScript的sendMsg函数，并且会拿到一个回调字符串，这个字符串就是Js通过return给我们的字符串
很遗憾，这个方法必须在Android API 19以上的版本才可以使用，如果要兼容以下的版本，必须通过特殊的方法进行处理，不过今天我们就暂不兼容以下的版本，因为现在基本都是5.0以上的用户了。
2.Android调用JavaScript有参方法
js方法
function getAndroidValue(value){
alert(value);
}
Android方法
String msg2Js = "Android传递了一个参数给Js";
webview.evaluateJavascript("javascript:getAndroidValue('" + msg2Js + "')", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
}
});
这里Android调用了Js的getAndroidValue方法，并且传递了一个字符串参数给它，让js弹窗。弹窗内容就是我们传递的参数
3.JavaScript调用Android无参方法
js代码
<button type="button" id="button1" onclick="callAndroidNoParams()">调用Android无参方法</button>
function callAndroidNoParams(){
JavaScriptObject.noParams();
}
Android这里开放了Js的接口
webview.addJavascriptInterface(new AndroidJs(), "JavaScriptObject");//暴露给Js的对象，Js必须引用这个对象调用我们的方法
我们在AndroidJS这个类里面
class AndroidJs extends Object {
@JavascriptInterface
public void noParams() {
Toast.makeText(MainActivity.this, "Js调用Android无参方法", Toast.LENGTH_SHORT).show();
}
}
4.JavaScript调用Android有参方法
Js代码
<button type="button" id="button2" onclick="callAndroidParams()">调用Android有参方法</button>
function callAndroidParams(){
JavaScriptObject.paramsToast("js调用Android有参方法");
}
Android暴露给Js的方法，获取他给的值，并且Toast出来
@JavascriptInterface
public void paramsToast(String content){
if (content!=null){
Toast.makeText(MainActivity.this, content, Toast.LENGTH_SHORT).show();
}
}
提示：
至于Android5.0以下的版本如果想获取Js的返回值，建议调用Js方法，然后让Js调我们的方法将值传递给我们
全部代码
testjs.html
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Android与JavaScript互调</title>
<script type="text/javascript">
function sendMsg(){
return "Android调用了Js无参函数";
}
function getAndroidValue(value){
alert(value);
}
function callAndroidNoParams(){
JavaScriptObject.noParams();
}
function callAndroidParams(){
JavaScriptObject.paramsToast("js调用Android有参方法");
}
</script>
</head>
<body>
Hello World!!!
<button type="button" id="button1" onclick="callAndroidNoParams()">调用Android无参方法</button>
</br>
<button type="button" id="button2" onclick="callAndroidParams()">调用Android有参方法</button>
</body>
</html>
Android代码
package com.wj.jsjavademo;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Toast;
@RequiresApi(api = Build.VERSION_CODES.KITKAT)
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private WebView webview;
private WebSettings settings;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initWebView();
}
private void initWebView() {
webview = (WebView) findViewById(R.id.webview);
webview.loadUrl("file:///android_asset/testjs.html");
findViewById(R.id.btn_call_js_no_params).setOnClickListener(this);
findViewById(R.id.btn_call_js_params).setOnClickListener(this);
settings = webview.getSettings();
settings.setJavaScriptEnabled(true);
settings.setJavaScriptCanOpenWindowsAutomatically(true);// 设置允许JS弹窗
webview.setWebChromeClient(new WebChromeClient());
webview.addJavascriptInterface(new AndroidJs(), "JavaScriptObject");//暴露给Js的对象，Js必须引用这个对象调用我们的方法
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn_call_js_no_params:
webview.evaluateJavascript("javascript:sendMsg()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
if (value != null) {
Toast.makeText(MainActivity.this, value, Toast.LENGTH_SHORT).show();
}
}
});
break;
case R.id.btn_call_js_params:
String msg2Js = "Android传递了一个参数给Js";
webview.evaluateJavascript("javascript:getAndroidValue('" + msg2Js + "')", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
}
});
break;
}
}
class AndroidJs extends Object {
@JavascriptInterface
public void noParams() {
Toast.makeText(MainActivity.this, "Js调用Android无参方法", Toast.LENGTH_SHORT).show();
}
@JavascriptInterface
public void paramsToast(String content){
if (content!=null){
Toast.makeText(MainActivity.this, content, Toast.LENGTH_SHORT).show();
}
}
}
}
网友评论