据说WebView的强大之处就是能和JavaScript进行交互调用。
参考博客:http://droidyue.com/blog/2014/09/20/interaction-between-java-and-javascript-in-android/
java调用JavaScript
- 实例化webview,获得WebSettings。通过WebSettings设置可以和JavaScript交互。
myWebView = (WebView) findViewById(R.id.webview); WebSettings webSettings = myWebView.getSettings(); // 使能使用JavaScript webSettings.setJavaScriptEnabled(true);
- 设置webview的 WebViewClient,重写onPageFinished方法。设置当网页加载完后去调用网页中JavaScript。
myWebView.setWebViewClient(new WebViewClient() { @Override public void onPageFinished(WebView view, String url) { //当page也加载完后 super.onPageFinished(view, url); javaUseJavaScript(myWebView); } }); myWebView.loadUrl("file:///android_asset/js_java_interaction.html");
- 实现第二步里自定义的javaUseJavaScript方法。
/** * java调用js方法 * * @param webView */ private void javaUseJavaScript(WebView webView) { String call = "javascript:sayHello()"; // call = "javascript:alertMessage("" + "content" + "")"; // // call = "javascript:toastMessage("" + "content" + "")"; // // call = "javascript:sumToJava(1,2)"; webView.loadUrl(call); }
完成了上面的步骤,就能调用JavaScript中sayHello()方法。sayHello方法在哪呢??就在你myWebView.loadUrl("file:///android_asset/js_java_interaction.html");的html文件中
<html> <script type="text/javascript"> function sayHello() { alert("Hello") } function alertMessage(message) { alert(message) } function toastMessage(message) { window.control.toastMessage(message) } function sumToJava(number1, number2){ window.control.onSumResult(number1 + number2) } </script> Java-Javascript Interaction In Android </html>
-
总结:的从上面的代码可以看出,java调js的代码中,java可以给js传递参数,但无法获得返回值。如果必须要返回值,只能反过来通过js调用java。也就是我们下面说的:
JavaScript调用Java
- 编写JavaScript代码去调用java中的方法。其实在java调用JavaScript的第三步的html中我们已经调用了。(绿色部分)
- 在java中编写代码,响应JavaScript的调用。
2.1给webview添加JavaScript接口类
myWebView.addJavascriptInterface(new JsInteration(), "control");
2.2编写JavaScript的接口类 JsInteration
/** * 实现js调用java的具体代码 * @author cyq * */ public class JsInteration { @JavascriptInterface public void toastMessage(String message) { Toast.makeText(getApplicationContext(), message, Toast.LENGTH_LONG).show(); } @JavascriptInterface public void onSumResult(int result) { Log.i(TAG, "onSumResult result=" + result); } }
- 总结:js调用java代码就是window.在addJavascriptInterface设置的第二个字符参数.在addJavascriptInterface这第一个参数类里的方法.(参数1,参数2.....).
- 注意:
1要调用WebView的addJavascriptInterface方法。在JavaScript的接口类中的方法前要加上@JavascriptInterface注解。
2html文件要放到Android项目的assets文件夹下:
3 调用JavaScript要在加载完网页之后,就是WebViewClient的onPageFinished方法中。
4 WebView的方法必须在主线程之中,至于为何就不知道了。原本我担心加载网页放在主线程中会导致ANR,其实不用担心这个问题,WebView内部应该做了处理了。
代码在WebViewActivity中。
4.4处理
前面说到java调用JavaScript只能传参数,无法得到返回值。如果需要返回值需要反过来JavaScript调用java代码,通过参数传递获得返回值。这在4.4以后有了改进。可以通过下面说的调用JavaScript的方法获得返回值。不过我个人认为还是用传递参数的方法比较好吧。版本兼容嘛。
- 在WebViewClient的onPageFinished方法中调用JavaScript
myWebView.setWebViewClient(new WebViewClient() { @Override public void onPageFinished(WebView view, String url) { //当page也加载完后 super.onPageFinished(view, url); testEvaluateJavascript( myWebView); } });
- 实现java代码
/** * 调用JavaScript方法获得返回值 * @param myWebView2 */ @SuppressLint("NewApi") protected void testEvaluateJavascript(WebView myWebView2) { myWebView.evaluateJavascript("getReturn(""+"参数1"+"")", new ValueCallback<String>() { @Override public void onReceiveValue(String value) { Log.i(TAG, "onReceiveValue value=" + value); } }); }
- 在html中编写JavaScript代码(绿色部分)
<html> <script type="text/javascript"> function sayHello() { alert("Hello") } function alertMessage(message) { alert(message) } function toastMessage(message) { window.control.toastMessage(message) } function sumToJava(number1, number2){ window.control.onSumResult(number1 + number2) } function getReturn(message) { return 1; } </script> Java-Javascript Interaction In Android </html>
运行代码,在Android的log中能够看到返回值1.