Android和JavaScript互相调用

Html页面和Java代码结合的方式一般用在界面常常被更改 的情况下，能够讲html放在网络中。软件一打开就会訪问网络获取到最新的界面。

缺点是会受到网络信号的影响，从而导致訪问速度慢。

1.用WebView来显示HTML代码

2.同意WebView运行JavaScript

    webView.getSettings().setJavaScriptEnabled(true);

3.获取到HTML文件，也可从网络中获取

   webView.loadUrl("file:///android_asset/index.html");   //HTML文件存放在assets目录中

4.加入一个对象, 让JS能够訪问该对象的方法, 该对象中也能够调用JS中的方法

   webView.addJavascriptInterface(new Contact(), "contact");

 

完整演示样例代码例如以下：

效果图：

MainActivity

[java] view plaincopy
  1. import android.app.Activity;  
  2. import android.content.Intent;  
  3. import android.net.Uri;  
  4. import android.os.Bundle;  
  5. import android.webkit.WebView;  
  6.   
  7. public class MainActivity extends Activity {  
  8.     private WebView webView;  
  9.   
  10.     public void onCreate(Bundle savedInstanceState) {  
  11.         super.onCreate(savedInstanceState);  
  12.         setContentView(R.layout.main);  
  13.         //载入页面  
  14.         webView = (WebView) findViewById(R.id.webView);  
  15.         //同意JavaScript运行  
  16.         webView.getSettings().setJavaScriptEnabled(true);  
  17.         //找到Html文件，也能够用网络上的文件  
  18.         webView.loadUrl("file:///android_asset/index.html");  
  19.         // 加入一个对象, 让JS能够訪问该对象的方法, 该对象中能够调用JS中的方法  
  20.         webView.addJavascriptInterface(new Contact(), "contact");  
  21.     }  
  22.   
  23.     private final class Contact {  
  24.         //JavaScript调用此方法拨打电话  
  25.         public void call(String phone) {  
  26.             startActivity(new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone)));  
  27.         }  
  28.   
  29.         //Html调用此方法传递数据  
  30.         public void showcontacts() {  
  31.             String json = "[{\"name\":\"zxx\", \"amount\":\"9999999\", \"phone\":\"18600012345\"}]";   
  32.             // 调用JS中的方法  
  33.             webView.loadUrl("javascript:show('" + json + "')");  
  34.         }  
  35.     }  
  36. }  

 

HTML：

[html] view plaincopy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5.         <title>Insert title here</title>  
  6.         <script type="text/javascript">  
  7.             function show(jsondata){              
  8.                     var jsonobjs = eval(jsondata);  
  9.                     var table = document.getElementById("personTable");  
  10.                     for(var y=0; y<jsonobjs.length; y++){  
  11.                         var tr = table.insertRow(table.rows.length);   
  12.                         var td1 = tr.insertCell(0);  
  13.                         var td2 = tr.insertCell(1);  
  14.                         td2.align = "center";  
  15.                         var td3 = tr.insertCell(2);  
  16.                         td3.align = "center";  
  17.                         td1.innerHTML = jsonobjs[y].name;   
  18.                         td2.innerHTML = jsonobjs[y].amount;   
  19.                         td3.innerHTML = "<a href='javascript:contact.call(\""+ jsonobjs[y].phone+ "\")'>"+ jsonobjs[y].phone+ "</a>";   
  20.                     }  
  21.             }  
  22.         </script>  
  23.     </head>  
  24.     <body onload="javascript:contact.showcontacts()">  
  25.        <table border="0" width="100%" id="personTable" cellspacing="0">  
  26.             <tr>  
  27.                 <td width="30%">姓名</td>  
  28.                 <td width="30%" align="center">存款</td>  
  29.                 <td align="center">电话</td>  
  30.             </tr>  
  31.         </table>  
  32.     </body>  
  33. </html>  


拨打电话须要加入权限：

<uses-permission android:name="android.permission.CALL_PHONE" /

posted @ 2017-04-23 18:26  jzdwajue  阅读(162)  评论(0)  编辑  收藏  举报