Flutter WebView加载WhatsApp下载页跳转至about:blank问题求助

核心问题定位 #

在未安装WhatsApp的iOS设备/模拟器上，webview_flutter加载https://www.whatsapp.com/download时自动跳转到about:blank，但断点调试时正常，大概率是WhatsApp页面的App检测逻辑与iOS WKWebView的线程调度冲突：

• WhatsApp下载页会检测设备是否安装App，未安装时会触发重定向（通常指向App Store）
• iOS WKWebView的导航处理依赖主线程调度，当重定向逻辑触发过快时，可能因线程竞争导致导航异常，最终 fallback 到about:blank
• 断点调试时线程调度变慢，给了WebView足够时间处理重定向，因此能正常加载

具体解决方案 #

1. 配置iOS Info.plist，允许WhatsApp Scheme查询

WhatsApp页面会尝试调用whatsapp://协议检测App是否存在，iOS要求提前声明允许查询该Scheme，否则会触发异常跳转。在ios/Runner/Info.plist中添加：

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>whatsapp</string>
</array>

2. 拦截about:blank跳转并强制重定向

通过NavigationDelegate监控所有导航请求，拦截about:blank并重新加载目标链接：

WebViewController controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..setNavigationDelegate(NavigationDelegate(
    onNavigationRequest: (NavigationRequest request) {
      // 打印所有请求，便于追踪跳转流程
      print('[WebView] Request URL: ${request.url}');
      
      if (request.url == 'about:blank') {
        // 拦截空白页，延迟100ms后重新加载目标链接
        Future.delayed(const Duration(milliseconds: 100), () {
          controller.loadRequest(Uri.parse('https://www.whatsapp.com/download'));
        });
        return NavigationDecision.prevent;
      }
      // 允许所有whatsapp相关域名及App Store的跳转
      if (request.url.startsWith('https://www.whatsapp.com') || 
          request.url.startsWith('https://apps.apple.com')) {
        return NavigationDecision.navigate;
      }
      return NavigationDecision.prevent;
    },
    onPageStarted: (String url) {
      print('[WebView] Page started: $url');
    },
    onPageFinished: (String url) {
      print('[WebView] Page finished: $url');
    },
  ));

3. 延迟加载链接，避免UI线程竞争

在Widget完全渲染完成后再发起加载请求，避免初始化阶段的线程冲突：

late final WebViewController controller;

@override
void initState() {
  super.initState();
  controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..setNavigationDelegate(/* 上述导航委托配置 */);
  
  // 等待Widget渲染完成后再加载
  WidgetsBinding.instance.addPostFrameCallback((_) {
    controller.loadRequest(Uri.parse('https://www.whatsapp.com/download'));
  });
}

4. 排查其他干扰因素

• 检查是否有第三方插件（如广告拦截、安全类插件）拦截了WebView导航
• 确认webview_flutter_wkwebview（iOS实现包）版本与webview_flutter主包版本一致（均为4.7.0）

验证方法 #

1. 重新编译iOS项目，启动后观察WebView加载流程
2. 查看控制台打印的导航请求，确认是否有异常跳转触发
3. 如果仍出现问题，尝试直接加载WhatsApp的App Store链接（https://apps.apple.com/us/app/whatsapp-messenger/id310633997）验证WebView是否能正常处理外部跳转

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