Android Native与Html互相调用

最新推荐文章于 2024-05-27 23:35:16 发布

HopCoder

最新推荐文章于 2024-05-27 23:35:16 发布

阅读量323

点赞数

CC 4.0 BY-SA版权

分类专栏： android 文章标签： android js

本文链接：https://blog.csdn.net/dingshuhong_/article/details/105798415

android 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用WebView.addJavascriptInterface实现H5与Android Native的双向通信，包括JS调用Native方法展示消息及Native调用JS方法更新页面内容。

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

JS调用Android原生

Js调用原生的有很多种，有使用通过在js中打开一个url，android采用拦截Url的形式获取参数，执行android 原生的代码逻辑，比如跳转或者弹出键盘。也有使用prompt 实现，通过调用html的prompt方法，android这边通过WebChromeClient方法的boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result)回调。同样通过与前端沟通好的协议，完成自己的Native代码逻辑。而本文采用WebView.addJavascriptInterface实现H5与Native通信。

public class JavaScriptUtil {

    private TextView mTextView;

    public JavaScriptUtil(TextView textView) {
        mTextView = textView;
    }

    @JavascriptInterface
    public void receiveByJs(String content) {
        mTextView.setText(content);
    }

}
//Activity中写入这样的代码
mWebView = findViewById(R.id.web_view);
mWebView.getSettings().setJavaScriptEnabled(true);//支持Js
JavaScriptUtil mJavaScriptUtil = new JavaScriptUtil(tv_content);
mWebView.addJavascriptInterface(mJavaScriptUtil, "jsCallNative");
mWebView.loadUrl("file:///android_asset/index.html"

对应的html页面只需要调用即可。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JsBridge</title>
    <script type="text/javascript">
        function h5CallNative(){
            var content = "我是来自Html的消息";
            //jsCallNative 可以理解成我们传入的JavaScriptUtil 对象
            jsCallNative.receiveByJs(content);
        }
		//暂时不能管这个方法
        function nativeCallH5(message){
            document.getElementById("demo").innerHTML=message;
        }
    </script>
</head>
<body>

<button onclick="h5CallNative()">H5调用原生</button>

<p id="demo"></p>

</body>
</html>

Android原生调用JS

同样是调用上面的html文件，有一点不同的是android端的调用只需要调用loadUrl 或者 evaluateJavascript api 就可以调用到js的方法。其中
mWebView.loadUrl("javascript:nativeCallH5('"+nativeMessage+"')") 方式是android 4.4以前的方法。 android 4.4以后使用方式二 mWebView.evaluateJavascript("javascript:nativeCallH5('"+nativeMessage+"')",new ValueCallback<String>() {}调用js的方法。ValueCallback是js的返回值。

    private void nativeCallH5(final String nativeMessage) {
        mWebView.post(new Runnable() {
            @Override
            public void run() {
                //方式一
                // mWebView.loadUrl("javascript:nativeCallH5('"+nativeMessage+"')");
                
                //方式二
                mWebView.evaluateJavascript("javascript:nativeCallH5('"+nativeMessage+"')",
                        new ValueCallback<String>() {
                            @Override
                            public void onReceiveValue(String value) {
                                Log.d(TAG, "onReceiveValue: " + value);
                            }
                        });
            }
        });
    }