Android：原生Java代码向网页Javascript传值

前言

Android Java代码向Javascript传值有两种方法：

1. 通过对象映射类方法return传值
2. 通过调用JavaScript方法传值

🏹 1. 方法一：对象映射类方法return传值

先说说第一种，android侧通过方法return值传至网页端，然后JavaScript通过弹窗把内容显示出来。

1.1 Html部分

<button id="button">Hello Android！</button>
<script>
    document.getElementById('button').onclick = function() {
        if (window.nativeMethod) {
            //  定义一个变量result，接收来自Android中hello方法的return值
            var result = nativeMethod.hello();
            //  弹窗显示result值
            alert(result);
        }
    }
</script>

1.2 Android部分

    @SuppressLint("SetJavaScriptEnabled")
    private void initView() {
        WebView webView = findViewById(R.id.webView);
        //  载入网页的URL地址
        webView.loadUrl("file:///android_asset/main.html");
        //	给WebView添加JavaScript接口
        //	该方法接收两个参数，第一个为对象映射类
        //	第二个自定义一个别名，用于JavaScript访问Android里的映射类  
        webView.addJavascriptInterface(new JsInterface(),"nativeMethod");
        //	WebChromeClient用于辅助WebView处理JavaScript的对话框、
        //	网站图标、网站title、加载进度等等
        //	这里的作用主要是把JS的弹窗显示出来
        webView.setWebChromeClient(new WebChromeClient());

        WebSettings webSettings = webView.getSettings();
        //  允许WebView加载JavaScript
        webSettings.setJavaScriptEnabled(true);
    }

    public class JsInterface {
        //  安全原因，android 4.x版本之后必须打「JavascriptInterface」的注解，JavaScript才能访问该方法
        @JavascriptInterface
        public String hello() {
            return "Hello JavaScript!";
        }
    }

1.3 效果图：

🖇 2. 方法二：调用JavaScript方法传值

第二种方法是通过WebView中的loadUrl()方法调用JavaScript代码。没错，WebView的loadUrl()方法不仅可以载入网页的URL地址，也能调用JavaScript中的代码并传值，类似于以下写法：

String value = "你好，JavaScript！";
webView.loadUrl("javascript:hello('" + value + "');");

其中value为想要传递的值，hello()则为JavaScript中的方法。（注意hello里面的参数要用单引号包裹）。

2.1 Html部分

在Js中定义一个方法，用于给Android调用并传值。

<script>
    function hello(value) {
        alert(value);
    }
</script>

2.2 Android部分

定义一个按钮，并给按钮一个监听事件：

@SuppressLint("SetJavaScriptEnabled")
    private void initView() {
        WebView webView = findViewById(R.id.webView);
        //  载入网页的URL地址
        webView.loadUrl("file:///android_asset/main.html");
        //	给WebView添加JavaScript接口
        //	该方法接收两个参数，第一个为对象映射类
        //	第二个自定义一个别名，用于JavaScript访问Android里的映射类
        webView.addJavascriptInterface(new JsInterface(),"nativeMethod");
        //	WebChromeClient用于辅助WebView处理JavaScript的对话框、
        //	网站图标、网站title、加载进度等等
        //	这里的作用主要是把JS的弹窗显示出来
        webView.setWebChromeClient(new WebChromeClient());

        WebSettings webSettings = webView.getSettings();
        //  允许WebView加载JavaScript
        webSettings.setJavaScriptEnabled(true);
        
        //  初始化按钮并设置监听事件
        Button button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String value = "你好，JavaScript！";
                webView.loadUrl("javascript:helloJs('"+value+"')");
            }
        });
    }

2.3 效果图：

2020年2月7日 星期五