Android WebView注入JS修改网页 替换标签文本

目的：修改Android中的WebView将网页中的文本进行替换，超过20个文字的长度用"..."表示

 

一、查看要修改的html文件

      在浏览器中输入网页url地址，并F12打开控制台，查看html代码结构Elements

可以看到我们要修改的标签Class为“msg-unit-detail”

二、选择WebView修改位置

    @SuppressLint("SetJavaScriptEnabled")
    private fun initWebView() {
        WebView.setBackgroundColor(0)

        WebView.settings.run {
            cacheMode = WebSettings.LOAD_DEFAULT// 设置缓存
            allowFileAccess = true // 允许访问文件
            setAppCacheEnabled(true)
            useWideViewPort = true
            layoutAlgorithm = WebSettings.LayoutAlgorithm.SINGLE_COLUMN
            loadWithOverviewMode = true
            displayZoomControls = false
            domStorageEnabled = true
            domStorageEnabled = true
            databaseEnabled = true
            javaScriptEnabled = true
            builtInZoomControls = true
        }

        WebView.addJavascriptInterface(this, "Android")

        WebView.webChromeClient = object : WebChromeClient() {
            override fun onProgressChanged(p0: WebView?, progress: Int) {
                handler.sendEmptyMessage(progress)
            }
        }
        WebView.webViewClient = object : WebViewClient() {
            override fun onPageFinished(view: WebView?, url: String?) {
                handler.sendEmptyMessage(100)
            }

            override fun onLoadResource(p0: WebView?, p1: String?) {
                super.onLoadResource(p0, p1)
                //js注入函数
                lengthChange(p0,p1)
            }
        }
    }

一般在onPageFinished中进行修改，WebView在加载完网页资源之后调用onPageFinished。但，此处是先调用onPageFinished，才显示网页内容，因此我们在onLoadResource进行JS注入。

三、在浏览器控制台Console编写JS代码

在Console中编写JS代码，并进行测试验证。

四、JS注入

    //需加入JS注解 @JavascriptInterface
    @JavascriptInterface
    fun lengthChange(view: WebView?, url: String?){

        Log.i("webview", url)

        var jsFuc = "javascript:function test(){ " +
                "var obj = document.getElementsByClassName('msg-unit-detail'); " +
                "for(var i = 0;i < obj.length; i++) { " +
                    "var text = obj[i].innerHTML;"+
                    "if(text.length > 20)" +
                        "obj[i].innerHTML = text.substr(0,20).concat('...'); " +
                    "}" +
                "}"

        //注入JS函数
        view?.loadUrl(jsFuc)
        //执行JS函数
        view?.loadUrl("javascript:test();")
        //刷新网页
        view?.loadUrl(url)
    }

缺点：onLoadResource为加载网页资源，在lengthChange又刷新网页，刷新网页又需要资源调用onLoadResource，如此往复，不停刷新网页，消耗资源。