Android平台,如何调用javascript操作网页和js调用系统功能

http://www.cnblogs.com/glony/articles/2145447.html

http://yoyotota.iteye.com/blog/1098707
预期效果:1、java编程实现显示一个网页显示(list,list中有电话号码),网页中的数据内容由程序传过去。
          2、点击网页中的电话号码部分,调用手机的打电话界面。
如图:



具体实现:
1、在assets中定义index.html文件,这个文件中table中的数据由javascript生成
ps:
(1) contactlist(jsons)将由java程序调用
(2) οnlοad="javascript:myjavascript.show():javascript调用java程序,详情见下文
Java代码   收藏代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3. <SCRIPT LANGUAGE="JavaScript">  
  4. <!--  
  5.   function contactlist(jsons){  
  6.   var table=document.getElementById("contactTable");//获得html中Table  
  7.   var arr = eval(jsons);//将jsons字符串转换为json对象数组  
  8.   for(var i=0;i < arr.length;i++){  
  9.     var jsonObj = arr[i];  
  10.     var tr = table.insertRow(table.rows.length);//添加tr  
  11.     var td1 = tr.insertCell(0);//td  
  12.     var td2 = tr.insertCell(1);  
  13.     td2.align = "center";  
  14.     var td3 = tr.insertCell(2);  
  15.   
  16.     td1.innerHTML = jsonObj.id;//设置每列对应的值  
  17.     td2.innerHTML = jsonObj.name;  
  18.     td3.innerHTML = jsonObj.phone;  
  19.     }  
  20.   }  
  21.   
  22.   //-->  
  23. </SCRIPT>  
  24.  <BODY οnlοad="javascript:myjavascript.show()">  
  25.    <table width="100%" border="0" cellspacing="0" id="contactTable">  
  26.     <tr>  
  27.       <td width="20%">编号</td>  
  28.       <td width="center">姓名</td>  
  29.       <td width="30%">电话</td>  
  30.     </tr>  
  31.    </table>  
  32.  </BODY>  
  33. </HTML>  


2、下面是java程序代码,首先是布局文件,很简单,就是一个webview
Java代码   收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent"  
  6.     >  
  7. <WebView    
  8.     android:layout_width="fill_parent"   
  9.     android:layout_height="fill_parent"   
  10.     android:id="@+id/webview"  
  11.     />  
  12. </LinearLayout>  


3、HtmlUIActivity类,这个类负责html的加载显示、添加javascript支持,提供给javascript调用接口。
Java代码   收藏代码
  1. /** 
  2.  * HTML ui类  
  3.  */  
  4. public class HtmlUIActivity extends Activity {  
  5.     private WebView webView;  
  6.     private Handler handler = new Handler();  
  7.     @Override  
  8.     public void onCreate(Bundle savedInstanceState) {  
  9.         super.onCreate(savedInstanceState);          
  10.         setContentView(R.layout.main);  
  11.         webView = (WebView)findViewById(R.id.webview);  
  12.        //重要:让webview支持javascript  
  13.         webView.getSettings().setJavaScriptEnabled(true);  
  14.        //重要:添加可以供html中可供javascript调用的接口类  
  15.         webView.addJavascriptInterface(new MyJavaScript(this, handler), "myjavascript");  
  16.         //加载index.html  
  17.         webView.loadUrl("file:///android_asset/index.html");  
  18.     }  
  19. }  


4、MyJavaScript负责提供数据并显示html

Java代码   收藏代码
  1. public class MyJavaScript {  
  2.     private WebView webview;  
  3.     //使用一个handler来处理加载事件  
  4.     private Handler handler;  
  5.     public MyJavaScript(Context context,Handler handler){  
  6.         this.handler = handler;  
  7.         webview = (WebView) ((Activity)context).findViewById(R.id.webview);  
  8.     }  
  9.     /* 
  10.      * java调用显示网页,异步 
  11.      */  
  12.     public void show(){  
  13.       handler.post(new Runnable() {           
  14.         public void run() {  
  15.         重要:url的生成,传递数据给网页  
  16.             String url = "javascript:contactlist('" + generateData() + "')";  
  17.            webview.loadUrl(url);  
  18.         }  
  19.        });  
  20.     }  
  21.     /* 
  22.      * 由java程序生成数据传到网页中显示 
  23.      */  
  24.     private String generateData(){  
  25.       try {  
  26.         //构造一个json对象  
  27.         JSONObject obj1 = new JSONObject();  
  28.         obj1.put("id"12);  
  29.         obj1.put("name""tom");  
  30.         obj1.put("phone""66666666");  
  31.               
  32.         JSONObject obj2 = new JSONObject();  
  33.         obj2.put("id"13);  
  34.         obj2.put("name""jerry");  
  35.         obj2.put("phone""88888888");  
  36.               
  37.         //将构造好的2个json对象加入到json数组中  
  38.         JSONArray arr = new JSONArray();  
  39.         arr.put(obj1);  
  40.         arr.put(obj2);  
  41.         return arr.toString();  
  42.         } catch (JSONException e) {  
  43.             // TODO Auto-generated catch block  
  44.             e.printStackTrace();  
  45.         }  
  46.         return "";  
  47.     }  
  48. }  


至此,java程序与javascript之间的双向调用已经完成了。至于我们预期目标的第2项,只需要:  
(1)、在MyJavaScript类中添加方法
Java代码   收藏代码
  1.  /* 
  2.  * 拨打电话方法 
  3.  */  
  4. ublic void call(final String phone){  
  5.       Intent intent = new Intent(Intent.ACTION_CALL,Uri.parse("tel:" + phone));  
  6. text.startActivity(intent);  
  7. }  
 
   (2)、在index.html中将
   
Java代码   收藏代码
  1. td3.innerHTML = jsonObj.phone;  

   修改为:
Java代码   收藏代码
  1. td3.innerHTML = "<a href=\"javascript:myjavascript.call('"+jsonObj.phone + "')\">" + jsonObj.phone + "</a>";  

   最后记得加上打电话的权限:
Java代码   收藏代码
<uses-permission android:name="android.permission.CALL_PHONE"></uses-permission>


  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值