码迷，mamicode.com
首页 > 移动开发 > 详细

WebView---Android与js交互实例

时间：2016-04-22 16:21:15      阅读：223      评论：0      收藏：0      [点我收藏+]

标签：

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

 原文地址：http://blog.csdn.net/it1039871366/article/details/46372207

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）

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



2） js（HTML）

[html] view plaincopyprint?
 
    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.   
    5. <meta http-equiv="Expires" content="0">  
    6. <meta http-equiv="Pragma" content="no-cache">  
    7. <meta http-equiv="Cache-Control" content="no-store,no-cache">   
    8. <meta name="Handheldfriendly" content="true">  
    9. <meta name="viewport" content="width=100%; initial-scale=1.0; user-scalable=yes">  
    10. <meta name="robots" content="all">  
    11. <meta name="keywords" contect="doodle, mobile, doodlemobile, game, games">  
    12. <meta name="description" content="Make People‘s Mobile Life More Connected Through Games.">  
    13.   
    14. <title>jsandroid_test</title>  
    15.   
    16. <script type="text/javascript" language="javascript">   
    17.       
    18.     function showHtmlcallJava(){  
    19.         var str = window.jsObj.HtmlcallJava();  
    20.         alert(str);  
    21.     }  
    22.       
    23.     function showHtmlcallJava2(){  
    24.         var str = window.jsObj.HtmlcallJava2("IT-homer blog");  
    25.         alert(str);  
    26.     }  
    27.       
    28.     function showFromHtml(){  
    29.         document.getElementById("id_input").value = "Java call Html";  
    30.     }  
    31.       
    32.     function showFromHtml2( param ){  
    33.         document.getElementById("id_input2").value = "Java call Html : " + param;   
    34.     }  
    35. </script>  
    36. </head>  
    37.   
    38.   
    39. <body>  
    40.   
    41. hello IT-homer  
    42.   
    43. <br>  
    44. <br>  
    45. <br>  
    46.   
    47. <input type="button" value="HtmlcallJava" onclick="showHtmlcallJava()" />  
    48. <br>  
    49. <input type="button" value="HtmlcallJava2" onclick="showHtmlcallJava2()" />  
    50.   
    51. <br>  
    52. <br>  
    53. <br>  
    54. <br>  
    55.   
    56. <input id="id_input" style="width: 90%" type="text" value="null" />  
    57. <br>  
    58. <input type="button" value="JavacallHtml" onclick="window.jsObj.JavacallHtml()" />  
    59.   
    60. <br>  
    61. <br>  
    62. <br>  
    63.   
    64. <input id="id_input2" style="width: 90%" type="text" value="null" />  
    65. <br>  
    66. <input type="button" value="JavacallHtml2" onclick="window.jsObj.JavacallHtml2()" />  
    67.   
    68. </body>  
    69. </html>  
        1. 4） 代码解析：（1） 允许Android执行js脚本设置

        2. 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控件

WebView---Android与js交互实例

标签：

原文地址：http://www.cnblogs.com/kamo-qie/p/5421528.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！