如何让Android WebView的addJavascriptInterface返回类变量（如表格对象）

核心限制说明 #

Android的addJavascriptInterface无法直接返回JS中的DOM对象（比如<table>），因为Java/Kotlin与JavaScript的运行环境完全隔离，原生代码无法直接持有JS的DOM实例。因此需要通过序列化DOM结构为原生可解析的结构化数据，再在原生端构建对应模型类，以此实现类似直接操作类变量的效果。

具体实现步骤 #

• 1. 定义原生端的表格模型类
  在Kotlin中创建对应HTML表格结构的实体类，用于接收JS传递的序列化数据：

  // 表格行数据类
  data class TableRow(val innerText: String, val cells: List<String>)
  
  // 表格数据类
  data class HtmlTable(val rows: List<TableRow>)
  

• 2. 通过JS序列化表格结构并传递给原生
  修改JS代码，将表格的行、单元格内容转换为JSON字符串，再通过交互接口传递给原生：

  // 获取目标表格
  const targetTable = document.getElementsByTagName('table')[0];
  // 序列化表格为结构化对象
  const tableData = {
    rows: Array.from(targetTable.querySelectorAll('tr')).map(tr => ({
      innerText: tr.innerText,
      cells: Array.from(tr.querySelectorAll('td, th')).map(cell => cell.innerText)
    }))
  };
  // 转成JSON字符串传给原生接口
  window.INTERFACE.receiveTable(JSON.stringify(tableData));
  

• 3. 配置WebView并解析JSON数据
  在Android端配置WebView，绑定交互接口，并在接口方法中将JSON解析为定义好的模型类：

  // JS交互接口类
  class WebAppInterface(private val context: Context) {
      @JavascriptInterface
      fun receiveTable(tableJson: String) {
          // 使用Gson解析JSON为HtmlTable对象（需添加Gson依赖）
          val htmlTable = Gson().fromJson(tableJson, HtmlTable::class.java)
          
          // 现在可直接像操作类变量一样访问表格内容
          val firstRow = htmlTable.rows[0]
          val firstCellText = firstRow.cells[0]
          // 此处编写业务逻辑
      }
  }
  
  // 配置WebView
  webview?.run {
      settings.javaScriptEnabled = true
      // 绑定JS交互接口
      addJavascriptInterface(WebAppInterface(context), "INTERFACE")
      // 加载目标HTML页面
      loadUrl("file:///android_asset/your_target_page.html")
      // 页面加载完成后执行序列化表格的JS代码
      webViewClient = object : WebViewClient() {
          override fun onPageFinished(view: WebView?, url: String?) {
              super.onPageFinished(view, url)
              evaluateJavascript("""
                  const targetTable = document.getElementsByTagName('table')[0];
                  const tableData = {
                    rows: Array.from(targetTable.querySelectorAll('tr')).map(tr => ({
                      innerText: tr.innerText,
                      cells: Array.from(tr.querySelectorAll('td, th')).map(cell => cell.innerText)
                    }))
                  };
                  window.INTERFACE.receiveTable(JSON.stringify(tableData));
              """.trimIndent(), null)
          }
      }
  }
  

• 4. 补充说明

  • 若需修改表格后同步回JS，可在原生端修改模型类数据，再序列化为JSON字符串，通过evaluateJavascript传递给JS，由JS负责更新DOM。
  • 交互接口方法必须添加@JavascriptInterface注解，否则JS无法调用；同时务必开启WebView的JavaScript支持。

内容的提问来源于stack exchange，提问作者Lập Trình