Flutter InAppWebView获取编辑后HTML内容的相关问题

1. 如何获取编辑后的HTML响应？ #

问题核心在于：用户对表单元素的输入（如输入框内容、单选/复选框状态）是保存在DOM元素的内存状态中，而非直接修改HTML的属性。getHtml()方法返回的是初始加载的静态HTML，直接获取innerHTML也不会自动同步这些动态状态。

解决方法是通过JavaScript先将表单元素的动态状态同步到DOM属性，再获取HTML：

// 在你的onTap回调中替换原有代码
var html = await _webViewController.evaluateJavascript(source: '''
  // 同步文本输入框、文本域的value到属性
  document.querySelectorAll('input[type="text"], input[type="email"], input[type="password"], textarea').forEach(el => {
    el.setAttribute('value', el.value);
  });
  // 同步单选框、复选框的checked状态
  document.querySelectorAll('input[type="radio"], input[type="checkbox"]').forEach(el => {
    el.checked ? el.setAttribute('checked', 'checked') : el.removeAttribute('checked');
  });
  // 同步下拉框选中状态
  document.querySelectorAll('select').forEach(el => {
    Array.from(el.options).forEach(opt => {
      opt.selected ? opt.setAttribute('selected', 'selected') : opt.removeAttribute('selected');
    });
  });
  // 返回目标容器的HTML
  document.getElementById("form-response").innerHTML;
''');
log('编辑后的HTML：$html');

2. 该问题是否因在onLoadStop和onWebViewCreated中调用控制器导致？ #

不是。在onWebViewCreated中保存控制器实例、onLoadStop中做后续操作都是正确的用法，和无法获取编辑后HTML的问题无关。

3. 能否接收WebView中文本框/单选框/复选框的内容变更流？ #

可以，通过JavaScript与Flutter的双向通信实现实时监听：

步骤1：在HTML模板中给表单元素添加事件 #

修改你的widget.htmlTemplate，给需要监听的表单元素绑定input或change事件，触发时调用Flutter的JavaScriptHandler：

<!-- 示例：文本输入框 -->
<input type="text" id="username" oninput="window.flutter_inappwebview.callHandler('formChanged', {
  type: 'text',
  id: this.id,
  value: this.value
})">

<!-- 示例：复选框 -->
<input type="checkbox" id="agree" onchange="window.flutter_inappwebview.callHandler('formChanged', {
  type: 'checkbox',
  id: this.id,
  checked: this.checked
})">

步骤2：在Flutter中注册对应的Handler #

在onWebViewCreated回调中添加：

_webViewController.addJavaScriptHandler(
  handlerName: 'formChanged',
  callback: (args) {
    Map<String, dynamic> changeData = args[0];
    log('表单元素变更：${changeData['id']} -> ${changeData['value'] ?? changeData['checked']}');
    // 这里可以维护一个本地的表单数据对象，实时更新
  },
);

4. 控制器是否有状态变更回调？ #

InAppWebViewController本身没有直接的表单状态变更回调，但可以通过上述HTML事件+JavaScriptHandler的方式实现等效的状态监听。控制器提供的回调（如onLoadStop、onConsoleMessage）主要针对WebView的加载状态、控制台输出等场景，不涉及表单内容变更。

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