如何在flutter_webview_plugin中自动执行JavaScript实现表单提交？

我明白你遇到的问题了——直接执行填充表单的JS代码没问题，但把代码放进DOMContentLoaded监听里就没反应，对吧？

问题根源 #

其实原因很简单：当你通过IconButton调用evalJavascript添加DOMContentLoaded监听时，页面的DOM可能已经加载完成了。这个事件只会在DOM首次加载完毕时触发一次，错过时机后再添加监听自然不会有任何回调。

正确的解决方案 #

既然你的需求是页面加载完成后自动填充表单，完全不需要依赖DOMContentLoaded事件，直接利用flutter_webview_plugin提供的页面加载状态回调就好。比如监听onStateChanged，当状态变为finishLoad时，再执行你的填充代码：

// 初始化webview时添加状态监听
flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged state) {
  // 确认页面完全加载完成
  if (state.type == WebViewState.finishLoad) {
    // 执行表单填充与提交的JS代码
    flutterWebviewPlugin.evalJavascript('''
      document.getElementById("user-id").value = "Phil Osoph";
      document.getElementById("pw-id").value = "Baum123";
      document._CustomLoginForm.submit();
    ''');
  }
});

额外提示 #

如果你的目标页面有动态渲染的内容（比如某些元素通过AJAX加载），finishLoad可能还不够，这时候可以考虑在finishLoad后加个短暂的延迟，或者使用MutationObserver监听目标元素的出现。不过对于普通的登录表单，上面的方案基本能覆盖需求。

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