Flutter Webview中CSS图标无法加载，显示带X方框求助

• 调整Webview的User-Agent设置
  移动端Chrome的User-Agent与flutter_inappwebview默认UA存在差异，部分网站会根据UA返回不同资源配置。可以在初始化Webview时指定Chrome移动端的UA：

  initialSettings: InAppWebViewSettings(
    userAgent: 'Mozilla/5.0 (Linux; Android 10; SM-G973F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Mobile Safari/537.36'
  )
  

• 启用混合内容加载权限
  若网站图标资源存在HTTP/HTTPS混合引用的情况，需设置Webview允许加载混合内容：

  initialSettings: InAppWebViewSettings(
    mixedContentMode: MixedContentMode.MIXED_CONTENT_ALWAYS_ALLOW
  )
  

• 清除Webview缓存与Cookie
  缓存或过期Cookie可能导致资源加载异常，可在Webview初始化前执行清除操作：

  await InAppWebViewController.clearCache();
  await InAppWebViewController.clearCookies();
  

• 排查资源加载日志
  通过onLoadResource回调监听资源加载状态，定位图标加载失败的具体原因：

  onLoadResource: (controller, resource) {
    if (resource.url.contains('favicon') || resource.url.contains('icon')) {
      print('图标资源加载状态：${resource.statusCode}');
    }
  }
  

• 手动注入图标资源
  如果上述方法均无效，可在页面加载完成后通过JS手动注入图标标签：

  onLoadStop: (controller, url) async {
    await controller.evaluateJavascript(source: '''
      const existingIcon = document.querySelector('link[rel="icon"]');
      if (existingIcon) existingIcon.remove();
      const newIcon = document.createElement('link');
      newIcon.rel = 'icon';
      newIcon.href = 'https://remotewant.com/favicon.ico';
      document.head.appendChild(newIcon);
    ''');
  }
  

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