Flutter中如何等待flutter_inappwebview(v6.0.0)的HeadlessInAppWebview加载完成？

• 你用loadUrl().then()无效的原因是，这个方法仅完成发起加载请求的操作，并不会等待页面完全加载完毕，因此后续无法获取完整的页面内容。

• 正确实现方式是借助HeadlessInAppWebView的onLoadStop回调（页面完全加载完成时触发），结合Completer实现异步等待并返回内容，具体代码示例如下：

import 'dart:async';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

Future<String?> fetchPageContent(String targetUrl) async {
  final completer = Completer<String?>();
  late HeadlessInAppWebView headlessWebView;

  headlessWebView = HeadlessInAppWebView(
    initialUrlRequest: URLRequest(url: Uri.parse(targetUrl)),
    onLoadStop: (controller, url) async {
      // 页面加载完成后，执行JS获取完整HTML内容
      final pageContent = await controller.evaluateJavascript(
        source: "document.documentElement.outerHTML"
      );
      completer.complete(pageContent);
      // 释放无头WebView资源
      await headlessWebView.dispose();
    },
    // 处理加载失败场景
    onLoadError: (controller, url, errorCode, errorMsg) {
      completer.completeError(Exception("页面加载失败: $errorMsg"));
      headlessWebView.dispose();
    },
  );

  // 启动无头WebView
  await headlessWebView.run();

  return completer.future;
}

// 使用示例
void main() async {
  final content = await fetchPageContent("https://example.com");
  print(content);
}

• 核心要点说明：

  • Completer用于创建可手动控制完成状态的Future，当onLoadStop触发时，将页面内容传入completer.complete()，让外部等待的Future获取结果。
  • 必须在操作完成后调用headlessWebView.dispose()释放资源，避免内存泄漏。
  • 通过evaluateJavascript执行JS代码抓取页面完整HTML，这是稳定获取页面内容的方式。

• 额外提示：如果页面包含AJAX动态加载的内容，onLoadStop仅会等待初始DOM加载完成。这种情况下可以考虑监听onLoadResource事件、等待特定元素出现，或者使用InAppWebViewController.waitForElementToBePresent方法（版本支持时）。

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