Android与H5（JS）互调_走马川行雪_android 调用h5

大大的周 02-07 3414

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://·/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>() { @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://·/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>  <button onclick="Android.toast()">点击Android被调用</button> </html>