Webview Android与js交互

Android 中可以通过webview来实现和js的交互，在程序中调用js代码，只需要将webview控件的支持js的属性设置为true

Android（Java）与JavaScript（HTML）交互有四种情况：

1） Android（Java）调用HTML中js代码

2） Android（Java）调用HTML中js代码（带参数）

3） HTML中js调用Android（Java）代码

4） HTML中js调用Android（Java）代码（带参数）

下面示例总结这四种情况，直接上干货：

1） Android（Java）

1. private void showWebView(){     // webView与js交互代码
2. try {
3. mWebView = new WebView(this);
4. setContentView(mWebView);
5. mWebView.requestFocus();
6. mWebView.setWebChromeClient(new WebChromeClient(){
7. @Override
8. public void onProgressChanged(WebView view, int progress){
9. JSAndroidActivity.this.setTitle("Loading...");
10. JSAndroidActivity.this.setProgress(progress);
11. if(progress >= 80) {
12. JSAndroidActivity.this.setTitle("JsAndroid Test");
13. }
14. }
15. });
16. mWebView.setOnKeyListener(new View.OnKeyListener() {        // webview can go back
17. @Override
18. public boolean onKey(View v, int keyCode, KeyEvent event) {
19. if(keyCode == KeyEvent.KEYCODE_BACK && mWebView.canGoBack()) {
20. mWebView.goBack();
21. return true;
22. }
23. return false;
24. }
25. });
26. WebSettings webSettings = mWebView.getSettings();
27. webSettings.setJavaScriptEnabled(true);
28. webSettings.setDefaultTextEncodingName("utf-8");
29. mWebView.addJavascriptInterface(getHtmlObject(), "jsObj");
30. mWebView.loadUrl("http://192.168.1.121:8080/jsandroid/index.html");
31. } catch (Exception e) {
32. e.printStackTrace();
33. }
34. }
35. private Object getHtmlObject(){
36. Object insertObj = new Object(){
37. public String HtmlcallJava(){
38. return "Html call Java";
39. }
40. public String HtmlcallJava2(final String param){
41. return "Html call Java : " + param;
42. }
43. public void JavacallHtml(){
44. runOnUiThread(new Runnable() {
45. @Override
46. public void run() {
47. mWebView.loadUrl("javascript: showFromHtml()");
48. Toast.makeText(JSAndroidActivity.this, "clickBtn", Toast.LENGTH_SHORT).show();
49. }
50. });
51. }
52. public void JavacallHtml2(){
53. runOnUiThread(new Runnable() {
54. @Override
55. public void run() {
56. mWebView.loadUrl("javascript: showFromHtml2('IT-homer blog')");
57. Toast.makeText(JSAndroidActivity.this, "clickBtn2", Toast.LENGTH_SHORT).show();
58. }
59. });
60. }
61. };
62. return insertObj;
63. }

2） js（HTML）

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <!-- saved from url=(0032)http://localhost:8080/jsandroid/ -->
3. <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4. <meta http-equiv="Expires" content="0">
5. <meta http-equiv="Pragma" content="no-cache">
6. <meta http-equiv="Cache-Control" content="no-store,no-cache">
7. <meta name="Handheldfriendly" content="true">
8. <meta name="viewport" content="width=100%; initial-scale=1.0; user-scalable=yes">
9. <meta name="robots" content="all">
10. <meta name="keywords" contect="doodle, mobile, doodlemobile, game, games">
11. <meta name="description" content="Make People's Mobile Life More Connected Through Games.">
12. <title>jsandroid_test</title>
13. <script type="text/javascript" language="javascript">
14. function showHtmlcallJava(){
15. var str = window.jsObj.HtmlcallJava();
16. alert(str);
17. }
18. function showHtmlcallJava2(){
19. var str = window.jsObj.HtmlcallJava2("IT-homer blog");
20. alert(str);
21. }
22. function showFromHtml(){
23. document.getElementById("id_input").value = "Java call Html";
24. }
25. function showFromHtml2( param ){
26. document.getElementById("id_input2").value = "Java call Html : " + param;
27. }
28. </script>
29. </head>
30. <body>
31. hello IT-homer
32. <br>
33. <br>
34. <br>
35. <input type="button" value="HtmlcallJava" onclick="showHtmlcallJava()" />
36. <br>
37. <input type="button" value="HtmlcallJava2" onclick="showHtmlcallJava2()" />
38. <br>
39. <br>
40. <br>
41. <br>
42. <input id="id_input" style="width: 90%" type="text" value="null" />
43. <br>
44. <input type="button" value="JavacallHtml" onclick="window.jsObj.JavacallHtml()" />
45. <br>
46. <br>
47. <br>
48. <input id="id_input2" style="width: 90%" type="text" value="null" />
49. <br>
50. <input type="button" value="JavacallHtml2" onclick="window.jsObj.JavacallHtml2()" />
51. </body>
52. </html>

3） 运行结果：

4） 代码解析：

（1） 允许Android执行js脚本设置

Android（Java）与js（HTML）交互的接口函数是： mWebView.addJavascriptInterface(getHtmlObject(), "jsObj");     // jsObj 为桥连对象

Android容许执行js脚本需要设置： webSettings.setJavaScriptEnabled(true);

（2） js（HTML）访问Android（Java）代码

js（HTML）访问Android（Java）端代码是通过jsObj对象实现的，调用jsObj对象中的函数，如： window.jsObj.HtmlcallJava()

（3） Android（Java）访问js（HTML）代码

Android（Java）访问js（HTML）端代码是通过loadUrl函数实现的，访问格式如：mWebView.loadUrl("javascript: showFromHtml()");

说明：

1） Android访问url网址，需在AndroidManifest.xml文件，配置容许访问网络的权限：
<uses-permission android:name="android.permission.INTERNET" />

2） Android（Java）调用js（HTML）时，使用的mWebView.loadUrl("javascript: showFromHtml()");函数需在UI线程运行，因为mWebView为UI控件