Android-WebView与本地HTML (互调)

时间 2019-11-19

标签 android webview 本地 html 互调栏目 Android 繁體版

原文原文链接

此篇博客是基于，上两篇博客，Android-WebView与本地HTML (HTML调用-->Java的方法) ， Android-WebView与本地HTML (Java调用--->HTML的方法) ；实现的一个综合实用案例javascript

contacts.xml（HTML + JavaScript）：

<!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>Web页面</title>


        <style type="text/css">
            html,body{
                width:100%;
                height:100%;
                padding:0px;
                margin:0px;
            }
            div.contact{
                margin:3px;
                position:relative;
                text-align: center;
                width:100%;
                height:40px;
                background-color:#e0dede;
            }
        </style>

        <script type="text/javascript">
            //保存模板html代码
            var template;

            //让java调用,生成联系人数据
            function show(arr){
                for(var i=0;i<arr.length;i++){
                    var innerHtml = document.body.innerHTML;
                    //利用模板替换生成每条数据
                    var row = template;
                    row = row.replace('name',arr[i].name);
                    row = row.replace('amount',arr[i].amount);
                    row = row.replace('phone',arr[i].phone);
                    row = row.replace('phone',arr[i].phone);
                    //将html拼接到body标签中
                    document.body.innerHTML = innerHtml+row;
                }
            }

            //初始化而且调用showcontacts去java请求数据
            function initContacts(){
                template = document.body.innerHTML;
                document.body.innerHTML = "";
                contact.showcontacts();
            }

            //按钮点击 时调用java的call
            function call(phone){
                contact.call(phone);
            }

            //页面加载时调用
            // window.onload = initContacts();

        </script>

    </head>

    <body onload="initContacts()">

        <!-- 模板项 -->
        <div class="contact">
            <span style="position:absolute;left:5px">name</span>
            <span style="position:absolute;top:20px;left:5px;font-size: 15px">amount</span>
            <span style="position:relative;top:5px;">phone</span>
            <button style="position:absolute;top:5px;right:5px" onclick="call('phone')">拨号</button>
        </div>

    </body>

</html>

描述实体Bean对象：

package cn.h5.java_and_html_call.bean;

public class ContactInfo {

    private String name;
    private String amount;
    private String phone;
    
    
    public ContactInfo() {
        super();
        // TODO Auto-generated constructor stub
    }
    
    
    public ContactInfo(String name, String amount, String phone) {
        super();
        this.name = name;
        this.amount = amount;
        this.phone = phone;
    }


    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getAmount() {
        return amount;
    }
    public void setAmount(String amount) {
        this.amount = amount;
    }
    public String getPhone() {
        return phone;
    }
    public void setPhone(String phone) {
        this.phone = phone;
    }
    
    
}

描述得到数据的服务对象：

package cn.h5.java_and_html_call.service;

import java.util.ArrayList;
import java.util.List;

import cn.h5.java_and_html_call.bean.ContactInfo;

public class ContactService {

    /**
     * 获取联系人的数据
     * @return
     */
    public List<ContactInfo> getContacts(){
        List<ContactInfo> contactInfos = new ArrayList<ContactInfo>();
        contactInfos.add(new ContactInfo("刘备", "10000000", "13900123456"));
        contactInfos.add(new ContactInfo("关羽", "2000000",  "18676868789"));
        contactInfos.add(new ContactInfo("张飞", "6000000",  "18900888888"));
        contactInfos.add(new ContactInfo("曹操", "13000000", "18000888888"));
        return contactInfos;
    }
}

Activity：

package cn.h5.java_and_html_call;

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

import org.json.JSONArray;
import org.json.JSONObject;

import java.util.List;

import cn.h5.R;
import cn.h5.java_and_html_call.bean.ContactInfo;
import cn.h5.java_and_html_call.service.ContactService;

public class MainActivity extends Activity {

    private ContactService service;
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main5);
        service = new ContactService();

        /**
         * 你能够把webview当作一个浏览器，webview里面有一个插件，能够把一个java对象传递给webview的插件，
         * 当插件获得这个对象以后，就能够让网页里面的 javascript代码对这个java对象进行调用
         */
        webView = findViewById(R.id.webview);

        /**
         * 加载本地的 contacts.html 文件
         */
        webView.loadUrl("file:///android_asset/contacts.html");

        /**
         * webview默认是不可以执行javascript
         * 如下代码是设置容许webview可以执行javascript代码
         */
        webView.getSettings().setJavaScriptEnabled(true);

        /**
         *  把Java对象传递给WebView的插件
         *  让JavaScript调用 ---> Java ContactPlugin类中的 方法
         */
        webView.addJavascriptInterface(new ContactPlugin(),"contact" );

    }

    /**
     * 此ContactPlugin类中的方法，和JavaScript定义的一致
     * 目的是为了让JavaScript调用 --> ContactPlugin类中的方法
     */
    private final class ContactPlugin{

        /**
         * contacts.html 被加载就会 调用showcontacts方法来得到JSON数据 给 javascript:show(" + json + ")
         *
         * 注意：初始化数据，由JavaScript调用，
         *      得到数据后 转换为JSON而且调用JavaScript的show方法，
         *      把数据给 JavaScript的show方法，而后HTML就把列表数据展现出来了
         */
        @JavascriptInterface
        public void showcontacts(){
            Log.d("@@@", "showcontacts 被JavaScript页面加载的时候 调用了");
            try {
                List<ContactInfo> contacts = service.getContacts();
                JSONArray jsonArray = new JSONArray();
                for(ContactInfo info:contacts){
                    JSONObject jsonObject = new JSONObject();
                    jsonObject.put("name", info.getName());
                    jsonObject.put("amount", info.getAmount());
                    jsonObject.put("phone", info.getPhone());
                    jsonArray.put(jsonObject);
                }
                final String json = jsonArray.toString();

                // Log.d("@@@", "json=======" + json);

                /**
                 * webView.loadUrl("javascript:show(" + json + ")");
                 * 注意：像这种方法不能写在这里，不然没效果一直阻塞的，打印不了:json=======后
                 * 解决方案：
                 *  须要加入runOnUiThread，才能解决此问题；
                 *  这个问题解决了两个小时 才发现是这里的问题，开始一直觉得是html/js有问题
                 */
                // webView.loadUrl("javascript:show(" + json + ")");

                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        /**
                         * Android WebView执行----> javascript代码
                         * Java调用----> JavaScript的show方法 把这些列表JSON数据，给JavaScript的show方法，而后HTML就把列表数据展现出来了
                         */
                        webView.loadUrl("javascript:show(" + json + ")");
                    }
                });


                Log.d("@@@", "json=======后");

            } catch (Exception e) {
                e.printStackTrace();

                Log.d("@@@", "e.ttt:" + e.toString());
            }
        }

        /**
         * 点击HTML列表上的电话号码后，此方法被JavaScript调用
         * 让JavaScript调用 打电话
         * @param phone
         */
        @JavascriptInterface
        public void call(String phone){
            Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone));
            startActivity(intent);
        }
    }
}

activity的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!--
       定义WebView
           1.WebView能够展示处理本地的HTML相关;
           2.WebView能够展示处理网络的HTML相关;
           3.WebView能够制做自定义浏览器;
           ....
    -->
    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></WebView>

</LinearLayout>

Android-WebView与本地HTML (互调)

contacts.xml（HTML + JavaScript）：

描述实体Bean对象：

描述得到数据的服务对象：

Activity：

activity的布局：

执行结果：