WebView打印前端Console日志

Quibbler 4月前 455

WebView打印前端Console日志


        安卓开发中WebView是非常常用的控件,用来加载网页,涉及前端和客户端交互开发的时候需要查看网页打印的日志,这时候可以通过重写WebChromeClient类中的onConsoleMessage()方法打印网页中的Console日志:

    class CustomChromeClient : WebChromeClient() {
    
        companion object {
            const val TAG = "consoleCustomChromeClient"
        }
        
        /*android 低版本 已废弃*/
        override fun onConsoleMessage(message: String?, lineNumber: Int, sourceID: String?) {
            Log.d(TAG, "$message($sourceID:$lineNumber)")
            super.onConsoleMessage(message, lineNumber, sourceID)
        }
        
        override fun onConsoleMessage(consoleMessage: ConsoleMessage?): Boolean {
            Log.d(
                TAG,
                "[" + consoleMessage?.messageLevel() + "] " + consoleMessage?.message() 
                + "(" + consoleMessage?.sourceId() + ":" + consoleMessage?.lineNumber() + ")"
            )
            return super.onConsoleMessage(consoleMessage)
        }
        
    }



        但有时候可能会有些厂商的ROM不显示Console日志,可以通过Webview与原生的交互来实现。首先定义一个类和方法,需要用@JavascriptInterface注解方法。

    class Console {
    
        @android.webkit.JavascriptInterface
        fun log(tag: String, msg: String) {
            Log.d(tag, msg)
        }
        
    }

        使用WebViewaddJavascriptInterface(@NonNull Object object, @NonNull String name)的方法进行对象映射:

    webview.addJavascriptInterface(Console(), "console")


        前端在开发的时候通过javascript对象映射,调用原生的方法以打印原生日志。

   <script>
     function callAndroid(){
    // 由于对象映射,所以调用console对象等于调用Android映射的对象
      console.log("js调用了android中的log方法");
     }
   </script>

        

不忘初心的阿甘
最新回复 (0)
    • 安卓笔记本
      2
        登录 注册 QQ
返回
仅供学习交流,切勿用于商业用途。如有错误欢迎指出:fluent0418@gmail.com