Android-WebView與本地HTML (Java調用--->HTML的方法)

時間 2019-11-19

標籤 android webview 本地 html java 調用方法欄目 Android 简体版

原文原文鏈接

上一篇博客 Android-WebView與本地HTML (HTML調用-->Java的方法) 介紹了 JavaScript 調用--> Java中的方法，而此篇博客是介紹 Java 調用---> JavaScript中的方法javascript

上上一篇博客 Android-WebView加載網絡圖片&網頁 介紹了使用WebView去加載網絡上的圖片與網頁;html

此篇博客專門介紹 Android-WebView與本地HTML (HTML調用-->Java的方法)，其實對於WebView來講不管是本地HTML 仍是網絡HTML ，代碼操做方式都是類似的，只是loadUrl(1.網絡連接或 2.本地連接)

Java 調用 ---> JavaScript的方法:

Activity:

package cn.h5;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.widget.EditText;

public class MainActivity4 extends Activity {

    private EditText etName;
    private WebView webView;

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

        setContentView(R.layout.activity_main4);

        etName = findViewById(R.id.et_name);

        /**
         * 定義此WebView 用於去展示本地HTML
         */
        webView = findViewById(R.id.wv_webview);

        /**
         * WebView默認是不可以執行javascript
         * 如下代碼是設置>>容許webview可以執行javascript代碼
         */
        webView.getSettings().setJavaScriptEnabled(true);

        // 這裏不須要設置 webView.addJavascriptInterface，是由於JavaScript不調用-->Java的方法

        /**
         * 加載本地的HTML文件
         */
        webView.loadUrl("file:///android_asset/test2.html");
    }

    /**
     * Button onClick 添加名字
     * @param view
     */
    public void addName(View view) {

        /**
         * 讓WebView去執行JavaScript代碼
         * 讓WebView去執行JavaScript的my_function方法
         *
         * JavaScript方法：
         *      function my_function(myname) {
         *          document.getElementById("demo").innerHTML = "Java設置個人值名字是:" + myname;
         *      }
         */
        webView.loadUrl("javascript:my_function(" + etName.getText().toString() + ")");
    }
}

activity的佈局:

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <EditText
            android:id="@+id/et_name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="請輸入給JS的名字"
            />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="添加"
            android:onClick="addName"
            />

    </LinearLayout>

    <!--
            定義WebView
                1.WebView能夠展示處理本地的HTML相關;
                2.WebView能夠展示處理網絡的HTML相關;
                3.WebView能夠製做自定義瀏覽器;
                ....
         -->
    <WebView
        android:id="@+id/wv_webview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="60dp">
    </WebView>

</LinearLayout>

test2.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">

        <!-- viewport的寬度等於設備寬度，viewport會根據屏幕寬度自動適應，而且對圖片和文字進行縮放顯示 -->
        <meta name="viewport" content="initial-scale=1.0" />

        <title>Web頁面</title>

        <script type="text/javascript">

            function my_function(myname) {
                document.getElementById("demo").innerHTML = "Java設置個人值名字是:" + myname;
            }

        </script>

    </head>

    <body>

        這是一個html頁面,如今在WebView中運行

        <p id = "demo"></p>

    </body>

</html>