javascript webview 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() {

@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() {

@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、完整布局代码

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

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" />

3.3、完整HTML代码

hello world

点击Android被调用

参考阅读

 您阅读本篇文章共花了：