Android中Java和JS的交互

参考:https://segmentfault.com/a/1190000011487440

WebView的使用

初始化WebView

WebView webView= (WebView) findViewById(R.id.webview);

webView.loadUrl("file:///android_asset/index.html");

在进行交互之前,需要开启WebView对JS的支持

WebSettings settings = webView.getSettings();

settings.setJavaScriptEnabled(true);

Java调用JS方法

通过WebView的loadUrl()通过WebView的evaluateJavascript()

首先定义了一个html文件,然后将其放置在asset目录下

我的页面

Android Java JS 交互测试

(1)通过loadUrl来调用JS方法

mWebView.post(new Runnable() {

@Override

public void run() {

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

}

});

(2)通过evaluateJavascript来调用JS方法

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

@Override

public void onReceiveValue(String value) {

Toast.makeText(WebViewActivity.this, value, Toast.LENGTH_SHORT).show();

}

});

这两个方法在开始调用的时候,出现的问题是报出错误信息,错误信息表示调用的JS方法未被定义,问题原因是因为在oncreate或者onResume方法中调用的时候,其JavaScript文件未被完全加载完成,因此出现了该问题,可以通过监听WebView的装载事件延迟调用来解决该问题。

JS调用Java方法

通过WebView的JavascriptInterface通过WebViewClient.shouldOverrideUrlLoading(),拦截加载信息通过WebChromeClient.onConsoleMessage(),拦截控制台信息通过WebChromeClient.onJsPrompt(),onJsAlert()、onJsConfirm()拦截Web相应弹框的事件

(1)通过WebView的JavascriptInterface

① 定义和JS相关的交互类和方法,对于方法通过@JavascriptInterface注解进行标注

public class JSTest {

private Context mContext;

public JSTest(Context context) {

mContext = context;

}

@JavascriptInterface

public void showToast(String str) {

Toast.makeText(mContext, str, Toast.LENGTH_SHORT).show();

}

}

@JavascriptInterface 用于标记可以被WebView调用的方法

② 向WebView添加该JavaScriptInterface(也就是类名JsTest),同时为其指定一个名称"JsTest",该名称将会在JS文件中使用

mWebView.addJavascriptInterface(new JsTest(context), "JsTest");

addJavascriptInterface(Object object, String name) 用于 inject a Java object as a global variable into the JavaScript environment 这样,JavaScript code就能使用该Java对象的所有public method

我的理解,addJavascriptInterface用于把一个Java类(接口)和一个JavaScript类关联起来。

③ JS调用Java方法

function showToast() {

JsTest.showToast("来自Web调用");

}

(2)通过WebView的回调函数onConsoleMessage()

在WebChromeClient中,有一个函数回调onConsoleMessage() 当js有console消息的时候,onConsoleMessage就会被回调到。 因此,可以Override定制onConsoleMessage方法,这样,js可以通过触发console消息,来调用java侧onConsoleMessage方法,进而调用其它代码。

① 在WebChromeClient中定义回调方法

@Override

public boolean onConsoleMessage(ConsoleMessage consoleMessage) {

String msg = consoleMessage.message();

if ("showToast".equals(msg)) {

Toast.makeText(mContext, "来自Web Toast测试", Toast.LENGTH_SHORT).show();

}

return super.onConsoleMessage(consoleMessage);

}

② JS 向控制台输出消息

function consoleTest() {

console.log("showToast");

}

文章来源

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: