zoukankan      html  css  js  c++  java
  • 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)

     

    [java]  view plain copy print ?
     
    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 plain copy print ?
     
    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=" 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=" 90%" type="text" value="null" />  
    65. <br>  
    66. <input type="button" value="JavacallHtml2" onclick="window.jsObj.JavacallHtml2()" />  
    67.   
    68. </body>  
    69. </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控件

     

    [java]  view plain copy print ?
     
    1. public void JavacallHtml(){  
    2.     runOnUiThread(new Runnable() {  
    3.         @Override  
    4.         public void run() {  
    5.             mWebView.loadUrl("javascript: showFromHtml()");  
    6.             Toast.makeText(JSAndroidActivity.this"clickBtn", Toast.LENGTH_SHORT).show();  
    7.         }  
    8.     });  
    9. }  
  • 相关阅读:
    【leetcode】1295. Find Numbers with Even Number of Digits
    【leetcode】427. Construct Quad Tree
    【leetcode】1240. Tiling a Rectangle with the Fewest Squares
    【leetcode】1292. Maximum Side Length of a Square with Sum Less than or Equal to Threshold
    【leetcode】1291. Sequential Digits
    【leetcode】1290. Convert Binary Number in a Linked List to Integer
    【leetcode】1269. Number of Ways to Stay in the Same Place After Some Steps
    【leetcode】1289. Minimum Falling Path Sum II
    【leetcode】1288. Remove Covered Intervals
    【leetcode】1287. Element Appearing More Than 25% In Sorted Array
  • 原文地址:https://www.cnblogs.com/jiangu66/p/3167778.html
Copyright © 2011-2022 走看看