Android 和 HTML 页面交互_android 本地 index-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_28356833/article/details/104040267

本文详细介绍了Android中WebView与HTML页面的交互方式，包括加载HTML页面、从Android调用HTML中的方法以及从HTML调用Android中的方法。文章通过具体代码示例展示了如何设置WebView以支持JavaScript，以及如何实现跨平台的数据传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考链接：参考地址

一.WebView加载HTML页面

String urlLocal = "file:///android_asset/index.html";
String url = "https://www.baidu.com/";
webView.setWebViewClient(new WebViewClient());
webView.loadUrl(urlLocak);//加载本地html文件或者网站url

本地文件index.html内容如下

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
    //2.2 无参，无返回值的方法
    function show() {
      document.getElementById("temp").innerHTML = "Hello world";
    }

    //2.3 有参，无返回值的方法
    function alertMsg(message) {
      alert(message);
    }

    //2.4 有返回值的方法
    function sum(i, j) {
      return i + j;
    }


  </script>

	
  <script type="text/javascript">
    //3 调用Android的方法
    function getMsg() {
      var result = window.H5Activity.back();
      document.getElementById("temp").innerHTML = result;
    }

  </script>

  <title>测试</title>
</head>
<body onLoad="init();">
<div id="temp">h5页面</div>
<button id="btn" onclick="getMsg()">按钮</button>
</body>
</html>

二.Android 调用 HTML 中的方法

2.1 webview添加对JavaScript支持

String urlLocal = "file:///android_asset/index.html";
String url = "https://www.baidu.com/";
webView.setWebViewClient(new WebViewClient());
webView.loadUrl(urlLocal);
//支持js
webView.getSettings().setJavaScriptEnabled(true);
//支持弹窗
webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        return super.onJsAlert(view, url, message, result);
    }
});

2.2 调用HTML`无参，无返回值`的方法（直接调用）

//格式 "javascript:xxx()" 其中xxx为HTML页面里函数名
webView.loadUrl("javascript:show()");

2.3 调用HTML`有参，无返回值`的方法

//格式 "javascript:xxx(a)" 其中xxx为HTML页面里函数名 字符串用单引号
webView.loadUrl("javascript:alertMsg('这是有参数的')");
//参数为变量的时候用转义字符
String message = "变量参数";
webView.loadUrl("javascript:alertMsg(\"" + message + "\")");

2.4 调用HTML`有返回值`方法

webView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String value) {
        T.showShort(H5Activity.this, "HTML页面返回结果是：" + value);
    }
});

三.HTML调用Android中的方法

调用的方法必须添加此注解@JavascriptInterface

//H5调用Android方法
@JavascriptInterface
public String testAndroid() {
    return "调用到了Android里的方法";
}

然后注册该方法，起名

//H5页面Android方法接口，html中调用使用别名
webView.addJavascriptInterface(this/*调用方法的类名*/, "H5Activity"/*别名*/);

最后在html中添加js代码，注意：html中js调用使用注册的别名

<script type="text/javascript">
function getMsg(){
    var result=window.H5Activity.testAndroid();
      document.getElementById("temp").innerHTML=result;
}
</script>