上一篇博客 Android-WebView与本地HTML (HTML调用-->Java的方法) 介绍了 JavaScript 调用--> Java中的方法，而此篇博客是介绍 Java 调用---> JavaScript中的方法

 

上上一篇博客 Android-WebView加载网络图片&网页 介绍了 使用WebView去加载网络上的图片与网页;

 

此篇博客专门介绍 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>

 

执行结果: