Android与H5（JS）互调

1、Android调用H5（JS）

1.1、新建assets资源目录并将准备好的HTML页面放入其中

（真实项目中HTML页面放在Tomcat中启动）

1.2、初始化webView并加载HTML页面

    @SuppressLint({"SetJavaScriptEnabled", "AddJavascriptInterface"})
    public void initWebView() {
        //可以加载网页和自定义浏览器
        webView = new WebView(this);

        //设置支持JS
        webView.getSettings().setJavaScriptEnabled(true);

        //设置不调用系统浏览器，使用自定义浏览器
        webView.setWebViewClient(new WebViewClient());

        //加载网络或本地网页
//        webView.loadUrl("https://www.bilibili.com/video/BV1SW411L7qM?p=3");
        webView.loadUrl("file:///android_asset/JavaAndJsCallActivity.html");

        //TODO 1、先初始化webView，此处先不要加载webView
//        setContentView(webView);
    }

1.3、调用HTML中的JS代码

        webView.post(new Runnable() {
            @Override
            public void run() {
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
                    //调用JS中的javaCallJs方法
                    webView.evaluateJavascript("javascript:javaCallJs(" + " ' "+ name + " ' " + ")", new ValueCallback<String&gt;() {
                        @Override
                        public void onReceiveValue(String s) {
                            //JS返回结果
                            Log.e("TAG", "onReceiveValue: " + s);
                        }
                    });
                } else {
                    webView.loadUrl("javascript:javaCallJs(" + " ' "+ name + " ' " + ")");
                }
            }
        });

        //TODO 2、调用完函数后再加载webView（否则会出现HTML中函数未定义的错误）
        setContentView(webView);

2、JS调用Android代码

2.1、 添加JavascriptInterface

//添加JavascriptInterface后JS可通过Android字段调用JavaAndJsCallInterface类中的任何方法
webView.addJavascriptInterface(new JavaAndJsCallInterface(), "Android");

2.2、编写JS要调用的Android类和Android方法

    /**
     * JS要调用的Java中的类.
     */
    class JavaAndJsCallInterface {

        //注意加注释
        @JavascriptInterface
        public void toast() {
            Toast.makeText(JavaAndJsCallActivity.this, "我是Android代码，我被调用了！", Toast.LENGTH_LONG).show();
        }

    }

3、完整代码如下

3.1、完整Activity代码

package com.android.h5;

import android.annotation.SuppressLint;
import android.os.Build;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.ValueCallback;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

/**
 * Java与JS互调.
 */
public class JavaAndJsCallActivity extends AppCompatActivity {

    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_java_and_js_call);

        initWebView();

        Button btnLogin = findViewById(R.id.btn_login);
        btnLogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                login("android");
            }
        });

    }

    @SuppressLint({"SetJavaScriptEnabled", "AddJavascriptInterface"})
    public void initWebView() {
        //可以加载网页和自定义浏览器
        webView = new WebView(this);

        //设置支持JS
        webView.getSettings().setJavaScriptEnabled(true);

        //设置不调用系统浏览器，使用自定义浏览器
        webView.setWebViewClient(new WebViewClient());

        //加载网络或本地网页
//        webView.loadUrl("https://www.bilibili.com/video/BV1SW411L7qM?p=3");
        webView.loadUrl("file:///android_asset/JavaAndJsCallActivity.html");

        //添加JavascriptInterface后JS可通过Android字段调用JavaAndJsCallInterface类中的任何方法
        webView.addJavascriptInterface(new JavaAndJsCallInterface(), "Android");

        //TODO 1、先初始化webView，此处先不要加载webView
//        setContentView(webView);
    }

    private void login(final String name) {

        webView.post(new Runnable() {
            @Override
            public void run() {
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
                    webView.evaluateJavascript("javascript:javaCallJs(" + " ' "+ name + " ' " + ")", new ValueCallback<String>() {
                        @Override
                        public void onReceiveValue(String s) {
                            //JS返回结果
                            Log.e("TAG", "onReceiveValue: " + s);
                        }
                    });
                } else {
                    webView.loadUrl("javascript:javaCallJs(" + " ' "+ name + " ' " + ")");
                }
            }
        });

        //TODO 2、调用完函数后再加载webView（否则会出现HTML中函数未定义的错误）
        setContentView(webView);
    }

    /**
     * JS要调用的Java中的类.
     */
    class JavaAndJsCallInterface {

        @JavascriptInterface
        public void toast() {
            Toast.makeText(JavaAndJsCallActivity.this, "我是Android代码，我被调用了！", Toast.LENGTH_LONG).show();
        }

    }
}

3.2、完整布局代码

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".JavaAndJsCallActivity">

    <Button
        android:id="@+id/btn_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="登录"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

3.3、完整HTML代码

<html lang="zh-CN">
<p id='p'>hello world</p>

<script>
        //JS中的函数
        function javaCallJs(arg){
            document.getElementById("p").innerHTML = " 你好！" + arg
        }
</script>

<!-- 调用Android中的toast函数 -->
<button onclick="Android.toast()">点击Android被调用</button>

</html>

代码007普通

打赏 收藏 海报 链接