Flutter中flutter_inappwebview登录会话存储与自动填充问题

一、修复JS注入的TypeError错误 #

你遇到的Cannot read properties of undefined (reading 'trim')错误，本质是注入JS时目标DOM元素还没加载完成，或者选择器写错导致获取不到元素。按下面步骤修正：

• 选对注入时机：放弃在页面开始加载时注入，改用onLoadStop（页面完全加载完成后触发）执行JS代码，确保DOM元素已渲染。
• 验证DOM选择器：先在浏览器控制台测试用户名、密码输入框和登录按钮的选择器是否有效，比如用document.querySelector('input[name="username"]')，确认能拿到对应元素。
• 安全的JS代码示例：

// 先判断元素存在再操作，避免报错
const usernameInput = document.querySelector('input[name="username"]');
const passwordInput = document.querySelector('input[name="password"]');
const loginBtn = document.querySelector('button[type="submit"]');

if (usernameInput && passwordInput && loginBtn) {
  usernameInput.value = 'upworktest1';
  passwordInput.value = 'mysimplepass';
  // 手动触发input事件，避免网站监听输入状态不更新
  usernameInput.dispatchEvent(new Event('input'));
  passwordInput.dispatchEvent(new Event('input'));
  loginBtn.click();
} else {
  console.log('未找到登录相关DOM元素');
}

二、实现登录会话持久化 #

flutter_inappwebview默认不会持久化Cookie，需要手动配置CookieManager和WebView设置：

• 初始化CookieManager：

final CookieManager cookieManager = CookieManager.instance();

// 提前配置目标网站的Cookie持久化规则
await cookieManager.setCookie(
  url: Uri.parse("https://你的目标网站域名"),
  name: "session",
  value: "",
  isPersistent: true,
  expires: DateTime.now().add(const Duration(days: 30)),
);

• 配置WebView启用存储：

InAppWebView(
  initialSettings: InAppWebViewSettings(
    javaScriptEnabled: true,
    cookieEnabled: true,
    domStorageEnabled: true, // 启用DOM存储
    databaseEnabled: true, // 启用数据库存储
  ),
  onLoadStop: (controller, url) async {
    // 在这里执行登录填充JS
  },
);

登录成功后，网站返回的会话Cookie会被自动持久化，下次打开WebView时会自动携带，无需重复登录。

三、优化自动填充逻辑 #

• 避免重复填充：先判断用户是否已登录，再决定是否注入填充代码：

onLoadStop: (controller, url) async {
  bool isLoggedIn = await controller.evaluateJavascript(source: '''
    // 根据网站实际情况判断，比如是否存在用户信息元素
    document.querySelector('.user-info') !== null;
  ''');
  if (!isLoggedIn) {
    // 执行填充JS
    await controller.evaluateJavascript(source: '''
      // 上面的填充代码
    ''');
  }
},

• 应对网站限制：如果网站禁用了直接设置value，改用execCommand填充：

usernameInput.focus();
document.execCommand('insertText', false, 'upworktest1');
usernameInput.blur();

passwordInput.focus();
document.execCommand('insertText', false, 'mysimplepass');
passwordInput.blur();

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