webview_flutter使用data/html加载Twitter组件出现空白不显示问题

• 调整iOS项目Info.plist配置

iOS端App Transport Security(ATS)默认限制不安全网络请求，WebView默认配置也会拦截第三方嵌入内容，需要在ios/Runner/Info.plist中添加如下配置：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoadsInWebContent</key>
    <true/>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
<key>WKPreferencesJavaScriptEnabled</key>
<true/>
<key>WKPreferencesJavaScriptCanOpenWindowsAutomatically</key>
<true/>

• 显式配置WebView iOS端运行参数

2.0.4版本webview_flutter的iOS侧默认对JS、跨域资源限制更严格，初始化控制器时需要显式开启兼容性配置：

import 'dart:io';
import 'package:webview_flutter/webview_flutter.dart';

late WebViewController webViewController;

@override
void initState() {
  super.initState();
  webViewController = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted);
  if (Platform.isIOS) {
    webViewController
      ..setUserAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1')
      ..allowFileAccessFromFileURLs(true)
      ..allowUniversalAccessFromFileURLs(true)
      ..setMediaPlaybackRequiresUserGesture(false);
  }
  webViewController.loadRequest(Uri.parse('你的Twitter嵌入资源地址'));
}

• 处理Cookie与缓存异常

iOS侧WKWebView的Cookie管理独立于应用网络层，加载前需要先清理旧缓存、配置必要的Twitter域名Cookie：

final CookieManager cookieManager = CookieManager.instance();
await cookieManager.setCookie(
  name: 'twttr_embed',
  value: 'allowed',
  domain: '.twitter.com',
  path: '/',
  isSecure: true,
);
await webViewController.clearCache();
await webViewController.clearLocalStorage();

• 升级同分支小版本修复已知bug

webview_flutter 2.0.4存在已知的iOS WKWebView跨域资源加载缺陷，可升级到2.0.x分支最新修复版本webview_flutter: ^2.0.15，该版本无API破坏性变更，不会影响原有安卓侧正常逻辑。

内容的提问来源于stack exchange，提问作者afsal.an