Flutter安卓应用如何获取JavaScript修改后的HTML动态数据？

我做了一个包含JavaScript动态修改值（点击按钮后变更）的HTML页面，同时用Flutter开发了安卓应用，需要获取HTML中被JS修改后的特定数据（如t_valKli、t_totKli、t_perKli元素的内容）。尝试过WebView（因安卓5.0兼容性问题失效）、HTML解析器（仅能获取初始固定值）、JSON解析（无法正确读取或生成目标JSON数据）等方案均未成功，寻求最优解决方法。

HTML部分 #

<tr>
    <td><button id = "btnKli" onclick = "getTEST();">OFF</button></td>
    <td><p>TEST</p></td>
    <td><p id = "t_valKli">0</p></td>
    <td><p id = "t_totKli">0</p></td>
    <td><p id = "t_perKli">0</p></td>
</tr>

JavaScript修改代码 #

document.getElementById("t_valKli").innerHTML = parseFloat(valKli).toFixed(2)

方案1：使用flutter_inappwebview插件（兼容安卓5.0+） #

这个插件对低版本安卓兼容性更好，能在Flutter中加载HTML并与JS交互：

• 添加依赖到pubspec.yaml：flutter_inappwebview: ^5.8.0（可根据最新版本调整）
• 加载HTML后，通过evaluateJavascript方法执行JS获取动态更新后的元素内容：

  // 获取t_valKli的内容
  String valKli = await inAppWebViewController.evaluateJavascript(
      source: "document.getElementById('t_valKli').innerHTML;"
  );
  // 同理获取t_totKli和t_perKli
  String totKli = await inAppWebViewController.evaluateJavascript(
      source: "document.getElementById('t_totKli').innerHTML;"
  );
  String perKli = await inAppWebViewController.evaluateJavascript(
      source: "document.getElementById('t_perKli').innerHTML;"
  );
  

• 可以监听页面的onLoadStop事件，或者在需要的时机主动调用上述代码获取最新值；如果需要实时监听变化，还可以在HTML的JS中添加监听，当值更新时通知Flutter。

方案2：让HTML主动向Flutter传递数据 #

修改HTML中的JS逻辑，在更新元素值的同时，把数据发送给Flutter：

• 在Flutter的flutter_inappwebview中设置javascriptChannels，创建一个通信通道：

  InAppWebViewController? webViewController;
  final JavascriptChannel _dataChannel = JavascriptChannel(
      name: 'DataChannel',
      onMessageReceived: (JavascriptMessage message) {
          // 接收JS传来的数据，格式可以自定义，比如JSON字符串
          Map<String, dynamic> data = jsonDecode(message.message);
          String valKli = data['valKli'];
          String totKli = data['totKli'];
          String perKli = data['perKli'];
          // 处理数据
      }
  );
  

• 修改HTML中的JS代码，更新值后发送数据：

  // 更新值
  const newVal = parseFloat(valKli).toFixed(2);
  document.getElementById("t_valKli").innerHTML = newVal;
  // 假设同时更新另外两个值后，一起发送
  const newTot = parseFloat(totKli).toFixed(2);
  document.getElementById("t_totKli").innerHTML = newTot;
  const newPer = parseFloat(perKli).toFixed(2);
  document.getElementById("t_perKli").innerHTML = newPer;
  // 发送给Flutter
  DataChannel.postMessage(JSON.stringify({
      'valKli': newVal,
      'totKli': newTot,
      'perKli': newPer
  }));
  

这个方法能实时获取数据，不需要Flutter主动轮询。

方案3：迁移JS逻辑到Flutter（适合本地HTML场景） #

如果HTML是本地资源，可以把JS中计算valKli、totKli、t_perKli的逻辑迁移到Flutter端，直接在Flutter中计算并更新UI，完全绕开JS交互问题，这是最稳定的方案，但需要你能拿到JS中的计算逻辑。

内容的提问来源于stack exchange，提问作者MrShady187