Flutter中如何实现WebView自动接受/移除Cookie访问Facebook群组

问题根因 #

• 你声明了_webViewController但从未完成初始化、也没有和WebView组件绑定，调用JS获取Cookie返回空字符串是必然结果。
• 默认WebView配置没有开启全量JS权限、使用默认移动端WebView标识，Facebook识别到嵌入式WebView环境后，会渲染无交互按钮的Cookie同意拦截页，不会正常加载群组内容。

具体实现 #

1. 先确保pubspec.yaml中使用的是最新稳定版webview_flutter依赖，旧版本WebView组件存在大量API兼容问题。
2. 在initState中完成控制器初始化，提前配置好必要参数，不要等页面加载后再修改配置：

late final WebViewController _webViewController;

@override
void initState() {
  super.initState();
  _webViewController = WebViewController()
    // 开启全量JS执行权限
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    // 设置桌面版Chrome UA，绕过Facebook对移动嵌入式WebView的检测
    ..setUserAgent("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36")
    // 监听页面加载完成事件，自动注入JS跳过Cookie弹窗
    ..setNavigationDelegate(NavigationDelegate(
      onPageFinished: (url) async {
        await _webViewController.runJavaScript('''
          // 自动匹配所有Cookie同意按钮并触发点击
          const acceptBtns = document.querySelectorAll('button[title*="Accept"], button[aria-label*="Allow"], button[data-cookiebanner="accept_button"]');
          acceptBtns.forEach(btn => btn.click());
          // 移除Cookie弹窗遮罩、拦截层
          const cookieBanners = document.querySelectorAll('div[role="dialog"], div[id*="cookie"], div[class*="cookie-banner"]');
          cookieBanners.forEach(banner => banner.remove());
          // 恢复页面正常滚动
          document.body.style.overflow = 'auto';
        ''');
      },
    ))
    // 加载目标Facebook群组地址
    ..loadRequest(Uri.parse('https://www.facebook.com/groups/380510889507267'));
}

3. 替换原有布局中的旧WebView组件，用WebViewWidget绑定初始化完成的控制器：

@override
Widget build(BuildContext context) {
  return Stack(
    children: <Widget>[
      Card(
        elevation: 5,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
        color: Colors.white,
        child: WebViewWidget(
          controller: _webViewController,
          gestureRecognizers: {
            Factory<VerticalDragGestureRecognizer>(() => VerticalDragGestureRecognizer()),
          },
        ),
      ),
      MaterialButton(
        color: Colors.white,
        shape: const CircleBorder(),
        child: const Icon(Icons.cookie,color: Colors.red),
        onPressed: () async {
          final cookies = await _webViewController.runJavaScriptReturningResult('document.cookie');
          debugPrint("当前Cookie: $cookies");
        },
      ),
    ],
  );
}

补充说明 #

• 如果仍出现Cookie拦截，可以在加载页面前通过WebViewCookieManager预置Cookie同意状态值，直接跳过检测逻辑。
• 不要使用默认移动端WebView UA，Facebook对嵌入式WebView限制极强，桌面端UA的拦截通过率高很多。
• 注入JS跳过弹窗的逻辑必须等页面完全加载完成后再执行，否则DOM未渲染完成会找不到对应弹窗元素。

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