Android与JavaScript交互中

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

上篇讲到WebView与Js交互的第一种方法：通过设置JavascriptInterface对象，调用loadUrl(String)执行Js语句，调用到JavascriptInterface中的方法，实现与Js的交互。

这篇来讲第二种方法：使用webView. evaluateJavascript(String, ValueCallback<T>)执行Js语句，该方法较loadUrl(String)轻量级，只需要局部刷新，而且还能直接拿到Js语句的返回值。其中第一个参数填入要执行的Js语句，格式以javascript:开头，后面是正常的Js语句，返回结果直接写在最后一行，不需要加return关键字。第二个参数用于处理Js执行结果的返回值，如果没有返回值，可以设为空。限制：1、只能在Android 19以上的版本使用！2、无法获取到回调或者异步执行中的结果

用法一：简单的交互，如在表单中填入数据：

webView.webViewClient=object : WebViewClient() {
    override fun onPageFinished(view: WebView?, url: String?) {
        super.onPageFinished(view, url)
        //通过输入框的class名获取输入框元素
        val input="document.getElementsByClassName("search-input isResourceVisible")[0]"  
        //通过Js在输入框填入内容"testJs"
        webView.evaluateJavascript("javascript:$input.value="testJs"",null)
    }
}

用法二：获取Js语句的执行结果，以获取HTML内容为例：

webView.webViewClient=object : WebViewClient() {
    override fun onPageFinished(view: WebView?, url: String?) {
        super.onPageFinished(view, url)
        val title="document.getElementsByClassName("phone-show-menu isResourceVisible")[0]"
        //通过title元素的innerHTML获取HTML内容，直接返回。$title.innerHTML便是要返回的内容
        webView.evaluateJavascript("javascript:$title.innerHTML",object :ValueCallback<String>{
            override fun onReceiveValue(p0: String?) {
                Log.d("JavaOBjectJsInterface","result:$p0" +
                        "")
            }
        })

用法三：回调和异步执行的结果处理，其实还是得通过添加JavascriptInterface对象进行处理，evaluateJavascript同样可以调用到JavascriptInterface对象的方法。以监听按钮点击事件返回输入框内容为例：

webView部分代码

webView.webViewClient=object : WebViewClient() {
    override fun onPageFinished(view: WebView?, url: String?) {
        super.onPageFinished(view, url)
        //获取输入框
        val input="document.getElementsByClassName("search-input isResourceVisible")[0]"
        //输入框内容
        val inputValue="$input.value"
        //获取按钮
        val btn="document.getElementsByClassName("seach-icon-container")[0]"
        //按钮添加点击事件监听，事件中调用了JavaOBjectJsInterface的clickListener（String）方法，传入参数为输入框的内容
        val js="javascript:$btn.addEventListener("click",function(){" +
                "javascript:window.testJs.clickListener($inputValue);})"
            webView.evaluateJavascript(js,null) //和webView.loadUrl(js)效果一样
    }
} 
webView.addJavascriptInterface(JavaOBjectJsInterface(webView),"testJs")

JavaOBjectJsInterface对象代码：

class JavaOBjectJsInterface(val webView: WebView) {

    private val TAG = JavaOBjectJsInterface::class.java.simpleName

    //千万不要忘了添加这个注解，不然Js找不到这个方法
    @JavascriptInterface
    fun clickListener(value:String){
        Log.d(TAG,"clickListener")
        Log.d(TAG,"value:$value")
    }
}

以上就是webView. evaluateJavascript(String, ValueCallback<T>)的基本使用方法。如果熟悉Js语法，还可以实现更加炫酷的功能！