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>

 

執行結果：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程