安卓webview和h5交互

article/2025/9/17 17:07:00

先上html的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML><HEAD><TITLE>安卓和js交互demo</TITLE><meta charset="utf-8"></HEAD><script> function giveAndroidData(content){var str = navigator.userAgent;if(str.indexOf("androidToJsDemo") != -1){android_js.giveAndroidData(content);}	}function getAndroidData(){var str = navigator.userAgent;if(str.indexOf("androidToJsDemo") != -1){alert("获取到安卓数据：" + android_js.getAndroidData());}}  function getData(content){alert("安卓调用了js的getData()方法，js拿到安卓传过来的数据："+content);return 'bcd';}</script><BODY><button type="button"  onclick="giveAndroidData('js调用了安卓的方法，给安卓传了数据')">调用安卓方法，给安卓传数据</button><br/><br/><button type="button"  onclick="getAndroidData()">调用安卓方法，获取安卓数据</button></BODY>
</HTML>

为了方便各位测试，上面的html代码我放到了自己的腾讯云服务器上，地址：http://123.206.81.43:8080/demo/androidToJsDemo.html

主要有两个按钮，都是js主动调用安卓方法，一个是给安卓传数据，另一个是获取安卓数据。

然后看一下安卓布局代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"android:orientation="vertical"tools:context=".MainActivity"><WebViewandroid:id="@+id/webView"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" /><Buttonandroid:layout_width="match_parent"android:layout_height="wrap_content"android:onClick="getDataFromJs"android:text="安卓调用js方法" />
</LinearLayout>

就一个webview和button，很简单

接下来看一下webview对应的activity代码：

import android.graphics.Bitmap;
import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;public class MainActivity extends AppCompatActivity {private static final String TAG = "MainActivity";private WebView mWebView;private final String url = "http://123.206.81.43:8080/demo/androidToJsDemo.html";@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mWebView = findViewById(R.id.webView);WebSettings settings = mWebView.getSettings();settings.setUserAgentString(settings.getUserAgentString() + "androidToJsDemo");settings.setJavaScriptEnabled(true);// 表示支持jssettings.setJavaScriptCanOpenWindowsAutomatically(true);mWebView.addJavascriptInterface(this, "android_js");mWebView.setWebViewClient(new WebViewClient() {@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {view.loadUrl(url);return true;}@Overridepublic void onPageStarted(WebView view, String url, Bitmap favicon) {super.onPageStarted(view, url, favicon);Log.e(TAG, "onPageStarted");}@Overridepublic void onPageFinished(WebView view, String url) {super.onPageFinished(view, url);Log.e(TAG, "onPageFinished");}});//不加这个，js中的alert就不会正常显示，webview只是一个承载体,各种内容的渲染需要使用webviewChromClient去实现,所以set一个默认的基类WebChromeClient就行mWebView.setWebChromeClient(new WebChromeClient() {@Overridepublic void onReceivedTitle(WebView view, String title) {super.onReceivedTitle(view, title);}});mWebView.loadUrl(url);}public void getDataFromJs(View v) {//安卓调用js的方法,并传过去abcif (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {mWebView.loadUrl("javascript:getData('abc')");} else {mWebView.evaluateJavascript("javascript:getData('abc')", new ValueCallback<String>() {@Overridepublic void onReceiveValue(String value) {//会收到js中getData方法的返回值Log.e(TAG, "onReceiveValue: " + value);}});}}@JavascriptInterface //一定注意不要忘记注解public void giveAndroidData(String content) {//js给安卓传数据toast(content);}@JavascriptInterfacepublic String getAndroidData() {//js调用安卓获取数据return "这是js从安卓获取到的数据123456";}public void toast(String s) {Toast.makeText(this, s, Toast.LENGTH_LONG).show();}}

其中，@JavascriptInterface注解标记的方法，是js能调用的方法

mWebView.addJavascriptInterface(MainActivity.this, "android_js");

是在js中定义了一个android_js对象，所以js中才能直接用android_js对象调用方法，一定要记得在js中通过UA判断是不是在安卓APP下，因为浏览器里面不存在这个对象，是安卓APP里面才有，我一般是在安卓默认的UA后面加上一段项目相关的字符串，方便js判断是否处于安卓APP里（settings.setUserAgentString(settings.getUserAgentString() + "androidToJsDemo");），然后js通过判断androidToJsDemo这段唯一字符串是否存在来判断是否在安卓APP：

var str = navigator.userAgent;
       if(str.indexOf("androidToJsDemo") != -1){
           //说明处在安卓APP里，不是在浏览器里，也不是ios里
       }

运行截图：点击H5中第一个按钮时，给安卓传过来字符串，安卓通过toast打印出来，如图：