預期效果:1、java編程實現顯示一個網頁顯示(list,list中有電話號碼),網頁中的數據內容由程序傳過去。
????????? 2、點擊網頁中的電話號碼部分,調用手機的打電話界面。
如圖:
具體實現:
1、在assets中定義index.html文件,這個文件中table中的數據由javascript生成
ps:
(1) contactlist(jsons) 將由java程序調用
(2) onload="javascript:myjavascript.show(): javascript調用java程序,詳情見下文
2、下面是java程序代碼,首先是布局文件,很簡單,就是一個webview
3、HtmlUIActivity類,這個類負責html的加載顯示、添加javascript支持,提供給javascript調用接口。
4、MyJavaScript負責提供數據并顯示html
至此,java程序與javascript之間的雙向調用已經完成了。至于我們預期目標的第2項,只需要: ??
(1)、在MyJavaScript類中添加方法
?? (2)、在index.html中將
???
?? 修改為:
?? 最后記得加上打電話的權限:
????????? 2、點擊網頁中的電話號碼部分,調用手機的打電話界面。
如圖:
具體實現:
1、在assets中定義index.html文件,這個文件中table中的數據由javascript生成
ps:
(1) contactlist(jsons) 將由java程序調用
(2) onload="javascript:myjavascript.show(): javascript調用java程序,詳情見下文
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function contactlist(jsons){
var table=document.getElementById("contactTable");//獲得html中Table
var arr = eval(jsons);//將jsons字符串轉換為json對象數組
for(var i=0;i < arr.length;i++){
var jsonObj = arr[i];
var tr = table.insertRow(table.rows.length);//添加tr
var td1 = tr.insertCell(0);//td
var td2 = tr.insertCell(1);
td2.align = "center";
var td3 = tr.insertCell(2);
td1.innerHTML = jsonObj.id;//設置每列對應的值
td2.innerHTML = jsonObj.name;
td3.innerHTML = jsonObj.phone;
}
}
//-->
</SCRIPT>
<BODY onload="javascript:myjavascript.show()">
<table width="100%" border="0" cellspacing="0" id="contactTable">
<tr>
<td width="20%">編號</td>
<td width="center">姓名</td>
<td width="30%">電話</td>
</tr>
</table>
</BODY>
</HTML>
2、下面是java程序代碼,首先是布局文件,很簡單,就是一個webview
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<WebView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/webview"
/>
</LinearLayout>
3、HtmlUIActivity類,這個類負責html的加載顯示、添加javascript支持,提供給javascript調用接口。
/**
* HTML ui類
*/
public class HtmlUIActivity extends Activity {
private WebView webView;
private Handler handler = new Handler();
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
webView = (WebView)findViewById(R.id.webview);
//重要:讓webview支持javascript
webView.getSettings().setJavaScriptEnabled(true);
//重要:添加可以供html中可供javascript調用的接口類
webView.addJavascriptInterface(new MyJavaScript(this, handler), "myjavascript");
//加載index.html
webView.loadUrl("file:///android_asset/index.html");
}
}
4、MyJavaScript負責提供數據并顯示html
public class MyJavaScript {
private WebView webview;
//使用一個handler來處理加載事件
private Handler handler;
public MyJavaScript(Context context,Handler handler){
this.handler = handler;
webview = (WebView) ((Activity)context).findViewById(R.id.webview);
}
/*
* java調用顯示網頁,異步
*/
public void show(){
handler.post(new Runnable() {
public void run() {
重要:url的生成,傳遞數據給網頁
String url = "javascript:contactlist('" + generateData() + "')";
webview.loadUrl(url);
}
});
}
/*
* 由java程序生成數據傳到網頁中顯示
*/
private String generateData(){
try {
//構造一個json對象
JSONObject obj1 = new JSONObject();
obj1.put("id", 12);
obj1.put("name", "tom");
obj1.put("phone", "66666666");
JSONObject obj2 = new JSONObject();
obj2.put("id", 13);
obj2.put("name", "jerry");
obj2.put("phone", "88888888");
//將構造好的2個json對象加入到json數組中
JSONArray arr = new JSONArray();
arr.put(obj1);
arr.put(obj2);
return arr.toString();
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return "";
}
}
至此,java程序與javascript之間的雙向調用已經完成了。至于我們預期目標的第2項,只需要: ??
(1)、在MyJavaScript類中添加方法
/*
* 撥打電話方法
*/
public void call(final String phone){
Intent intent = new Intent(Intent.ACTION_CALL,Uri.parse("tel:" + phone));
context.startActivity(intent);
}
?
?? (2)、在index.html中將
???
td3.innerHTML = jsonObj.phone;
?? 修改為:
td3.innerHTML = "<a href=\"javascript:myjavascript.call('"+jsonObj.phone + "')\">" + jsonObj.phone + "</a>";
?? 最后記得加上打電話的權限:
<uses-permission android:name="android.permission.CALL_PHONE"></uses-permission>
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061
微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元

