Flutter中如何通过webview获取用户输入的用户名？

可以通过addJavaScriptChannel配合JavaScript代码实现点击登录按钮时获取用户名，具体操作如下：

1. 确认WebView基础配置 #

你已添加的usernameInput JavaScriptChannel没问题，需要补充开启JavaScript支持，并确保能控制WebView实例：

WebView(
  initialUrl: '你的登录页面地址',
  javascriptMode: JavascriptMode.unrestricted, // 必须开启，否则JS无法执行
  javascriptChannels: {
    JavascriptChannel(
      name: 'usernameInput',
      onMessageReceived: (message) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('获取到用户名：${message.message}')),
        );
      },
    ),
  },
  // 保存WebViewController用于后续注入JS
  onWebViewCreated: (controller) {
    webViewController = controller;
  },
  // ...其他配置
)

2. 注入JS监听登录按钮点击 #

根据登录页面的控制权，分两种场景处理：

场景A：你能修改登录页面代码 #

直接在登录页面的登录按钮点击逻辑中添加代码，调用Flutter的Channel：

// 替换成页面实际的按钮和输入框选择器（比如id、class）
document.querySelector('#loginBtn').addEventListener('click', () => {
  const username = document.querySelector('#usernameInput').value;
  usernameInput.postMessage(username);
});

场景B：无法修改登录页面（第三方页面） #

在WebView加载完成后，通过evaluateJavascript注入监听代码：

onPageFinished: (url) {
  webViewController?.evaluateJavascript('''
    // 替换成页面实际的按钮和输入框选择器
    document.querySelector('#loginBtn').addEventListener('click', function() {
      const username = document.querySelector('#username').value;
      usernameInput.postMessage(username);
    });
  ''');
},

关键注意点 #

• 必须匹配页面中登录按钮和用户名输入框的正确DOM选择器，如果页面用框架渲染（如Vue/React），可能需要等待元素渲染完成后再注入代码，可结合setTimeout或MutationObserver处理。
• 确保javascriptMode设置为JavascriptMode.unrestricted，否则注入的JS代码无法执行。

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