android javaScript数据传递

最新推荐文章于 2021-05-28 20:58:55 发布

xdz_8899

最新推荐文章于 2021-05-28 20:58:55 发布

阅读量1.8k

点赞数 1

分类专栏： android 文章标签： Android JavaScript 方法调用数据传递

本文链接：https://blog.csdn.net/xuduzhoud/article/details/8849693

版权

android 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

 文中代码来自网上，在此引用只做分析
    android中加载html文件时使用的是WebView控件，如果是加载网络中的html文件，就要在AndroidManifest.xml文件中添加访问网络的权限：android.permission.INTERNET。加载本地assets目录下的html文件就不用加了。本文的代码实例中就是加载的assets中的index.html文 件。
    在本实例的index.html中使用了javaScript，所以webview必须支持Javascript。

	webView.getSettings().setJavaScriptEnabled(true);

MainActivity代码

package com.chinasofti.html;

import java.util.List;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import com.chinasofti.domain.Contact;
import com.chinasofti.service.ContactService;
import com.example.jstest.R;

import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.util.Log;
import android.webkit.WebView;

public class MainActivity extends Activity {
    private static final String TAG = "MainActivity";
    private ContactService contactService;
    private WebView webView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        contactService = new ContactService();
        webView = (WebView) this.findViewById(R.id.webView);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new ContactPlugin(), "contact");
        webView.loadUrl("file:///android_asset/index.html");
    }

    private final class ContactPlugin {
        public void getContacts() {
            List<Contact> contacts = contactService.getContacts();
            try {
                JSONArray array = new JSONArray();
                for (Contact contact : contacts) {

                    JSONObject item = new JSONObject();
                    item.put("id", contact.getId());
                    item.put("name", contact.getName());
                    item.put("mobile", contact.getMobile());
                    array.put(item);
                }
                String json = array.toString();
                Log.i(TAG, json);
                webView.loadUrl("javascript:show('" + json + "')");
            } catch (JSONException e) {
                e.printStackTrace();
            }
        }

        public void call(String mobile) {
            Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + mobile));
            startActivity(intent);
        }

        public void startAcivity() {
            Intent intent = new Intent(MainActivity.this, NewActivity.class);
            startActivity(intent);
        }
    }
}

在MainActivity的onCreate方法代码：

	webView = (WebView) this.findViewById(R.id.webView);
        webView.getSettings().setJavaScriptEnabled(true);//使webview支持javascript 
	webView.addJavascriptInterface(new ContactPlugin(), "contact");//加载ContactPlugin对象 取昵称contact 在JavaScript中使用       
	 webView.loadUrl("file:///android_asset/index.html");//加载assets目录下的index.html文件

至此完成了index.html的加载，下面我们来看一下index.html文件。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

        function show(jsondata){
                var jsonobjs = eval(jsondata);
                var table = document.getElementById("personTable");
                for(var y=0; y<jsonobjs.length; y++){
                        var tr = table.insertRow(table.rows.length); //添加一行
                        //添加三列
                        var td1 = tr.insertCell(0);
                        var td2 = tr.insertCell(1);
                        td2.align = "center";
                        var td3 = tr.insertCell(2);
                        td3.align = "center";
                        //设置列内容和属性
                        td1.innerHTML = jsonobjs[y].id; 
                        td2.innerHTML = jsonobjs[y].name; 
                        td3.innerHTML = "<a href='javascript:contact.call(\""+ jsonobjs[y].mobile+ "\")'>"+ jsonobjs[y].mobile+ "</a>"; 
                        }
        }
</script>

</head>
<!-- js代码通过webView调用其插件中的java代码 -->
<body οnlοad="javascript:contact.getContacts()">
   <table border="0" width="100%" id="personTable" cellspacing="0">
                <tr  bgcolor="#00FFCC">
                        <td width="20%">编号</td><td width="40%" align="center">姓名</td><td align="center">电话</td>
                </tr>
        </table>
        <img src="images/ic_launcher.png" >
        <a href="javascript:window.location.reload()">刷新</a>
        <a href="javascript:contact.startAcivity()">跳转</a>

</body>
</html>

οnlοad="javascript:contact.getContacts()"
在页面被加载后执行ContactPlugin contact的getContacts()方法。

public void getContacts() {
            List<Contact> contacts = contactService.getContacts();
            try {
                JSONArray array = new JSONArray();
                for (Contact contact : contacts) {

                    JSONObject item = new JSONObject();
                    item.put("id", contact.getId());
                    item.put("name", contact.getName());
                    item.put("mobile", contact.getMobile());
                    array.put(item);
                }
                String json = array.toString();
                Log.i(TAG, json);
                webView.loadUrl("javascript:show('" + json + "')");
            } catch (JSONException e) {
                e.printStackTrace();
            }
        }

在执行到webView.loadUrl("javascript:show('" + json + "')");将生成的JSON字符串传递到index.html中javaScript的show()方法中

<script type="text/javascript">

        function show(jsondata){
                var jsonobjs = eval(jsondata);
                var table = document.getElementById("personTable");
                for(var y=0; y<jsonobjs.length; y++){
                        var tr = table.insertRow(table.rows.length); //添加一行
                        //添加三列
                        var td1 = tr.insertCell(0);
                        var td2 = tr.insertCell(1);
                        td2.align = "center";
                        var td3 = tr.insertCell(2);
                        td3.align = "center";
                        //设置列内容和属性
                        td1.innerHTML = jsonobjs[y].id; 
                        td2.innerHTML = jsonobjs[y].name; 
                        td3.innerHTML = "<a href='javascript:contact.call(\""+ jsonobjs[y].mobile+ "\")'>"+ jsonobjs[y].mobile+ "</a>"; 
                        }
        }
</script>

在show方法中将传递来的字符串解析后逐行显示，并且在每一行的第三列添加了一个链接，
td3.innerHTML = "<a href='javascript:contact.call(\""+ jsonobjs[y].mobile+ "\")'>"+ jsonobjs[y].mobile+ "</a>";
我们看到在该链接被点击的时候掉用了ContactPlugin contact的call(String str)方法,同时传递了参数jsonobjs[y].mobile。

 public void call(String mobile) {
            Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + mobile));
            startActivity(intent);
        }

这里call()实现了打电话的功能，此时我们要在AndroidMainfest.xml文件中添加打电话的权限<uses-permission android:name="android.permission.CALL_PHONE"/>下面是在index.html的跳转（打开另外一个activity）

<a href="javascript:contact.startAcivity()">跳转</a>

我们看到这个链接是调用了ContactOlugin contact中的startActivity()方法

public void startAcivity() {
            Intent intent = new Intent(MainActivity.this, NewActivity.class);
            startActivity(intent);
        }

该方法就是打开NewActivity。

在这个实例中

activity向Javascript传递数据使用 webView.loadUrl("javascript:show('" + json + "')");

javascript向activity传递数据使用'javascript:contact.call(\""+ jsonobjs[y].mobile+ "\")' 方法调用"javascript:contact.startAcivity()"、"javascript:contact.getContacts()"。