Android 和 HTML 页面交互

╰半橙微兮° 2023-07-01 05:29 7阅读 0赞

参考链接：[参考地址][Link 1]

# 一.WebView加载HTML页面 #

本地文件`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调用使用注册的别名

[Link 1]: https://www.cnblogs.com/daisy270/p/8444924.html