android javascript 双向数据操作

最新推荐文章于 2024-05-02 18:12:22 发布

jationxiaozi

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量1.8k

点赞数

分类专栏： android 文章标签： javascript android java html layout json

android 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

预期效果：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代码

<!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 οnlοad="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>

<!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 οnlοad="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

Java代码

<?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>

<?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调用接口。

Java代码

/**
* 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");
}
}

/**
 * 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

Java代码

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 "";
}
}

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类中添加方法

Java代码

/*
* 拨打电话方法
*/
ublic void call(final String phone){
Intent intent = new Intent(Intent.ACTION_CALL,Uri.parse("tel:" + phone));
text.startActivity(intent);
}

    /*
    * 拨打电话方法
    */
  public void call(final String phone){
         Intent intent = new Intent(Intent.ACTION_CALL,Uri.parse("tel:" + phone));
context.startActivity(intent);
   }

(2)、在index.html中将

Java代码

td3.innerHTML = jsonObj.phone;

 td3.innerHTML = jsonObj.phone;

修改为：

Java代码

td3.innerHTML = "<a href=\"javascript:myjavascript.call('"+jsonObj.phone + "')\">" + jsonObj.phone + "</a>";

td3.innerHTML = "<a href=\"javascript:myjavascript.call('"+jsonObj.phone + "')\">" + jsonObj.phone + "</a>";

最后记得加上打电话的权限：

Java代码

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

jationxiaozi

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
android javascript 双向数据操作

预期效果：1、java编程实现显示一个网页显示（list，list中有电话号码），网页中的数据内容由程序传过去。 2、点击网页中的电话号码部分，调用手机的打电话界面。如图：具体实现： 1、在assets中定义index.ht
复制链接

扫一扫