Flutter Web端如何从WebView获取HTML内容？

针对你遇到的flutter_inappwebview和webview_flutter_web在Web/Chrome端无法获取已渲染HTML的问题，有以下几种可行的解决思路：

1. 直接通过HTTP请求获取原始HTML（非渲染后内容） #

如果不需要页面JS渲染后的动态内容，直接用Dart的HTTP库请求目标网站的原始HTML即可，这是全平台通用的方案：

import 'package:http/http.dart' as http;

Future<String> getRawHtml(String url) async {
  final response = await http.get(Uri.parse(url));
  if (response.statusCode == 200) {
    return response.body;
  } else {
    throw Exception('Failed to load HTML');
  }
}

注意：这种方式拿到的是服务器返回的原始HTML，不包含页面JS动态生成的内容，适合静态页面或不需要DOM渲染结果的场景。

2. Web/Chrome端直接调用浏览器JS API获取渲染后HTML #

Flutter Web本质运行在浏览器环境中，可通过dart:js直接调用浏览器DOM API获取已渲染的完整HTML：

方案A：获取当前页面的渲染后HTML #

如果你的Flutter Web应用本身加载的就是目标页面（而非内嵌WebView），直接调用浏览器的document API：

import 'dart:js' as js;

String getRenderedHtml() {
  return js.context['document']?.callMethod('querySelector', ['html'])?.getProperty('outerHTML') ?? '';
}

方案B：获取内嵌WebView（iframe）的渲染后HTML #

如果是用webview_flutter_web内嵌的页面，且目标页面和你的Flutter Web应用同域（无跨域限制），可以通过iframe的DOM对象获取：

import 'dart:js' as js;

String getIframeHtml(String iframeId) {
  final iframe = js.context['document']?.callMethod('getElementById', [iframeId]);
  final iframeDoc = iframe?.getProperty('contentDocument') ?? iframe?.getProperty('contentWindow')?.getProperty('document');
  return iframeDoc?.callMethod('querySelector', ['html'])?.getProperty('outerHTML') ?? '';
}

注意：跨域情况下浏览器会阻止访问iframe内容，此时需要后端代理或让目标页面配置CORS允许你的域名访问。

3. 关于WebView插件的局限性 #

flutter_inappwebview和webview_flutter_web在Web端的实现依赖浏览器iframe，受限于浏览器跨域安全策略，且插件本身在Web端的API支持不完善（比如addJavascriptChannel未实现），因此无法直接通过插件API获取渲染后的HTML，上述绕开WebView的方案更可行。

内容的提问来源于stack exchange，提问作者Miguel de Sousa