如何使用webview_flutter获取网页显示文本？适配需首次登录站点

核心逻辑 #

借助webview_flutter的JS交互能力，在网页加载完成后注入JavaScript代码提取页面文本，同时兼容需要登录的场景。

分步实现 #

1. 初始化WebView并处理登录 #

首先配置WebView开启JS支持，加载目标网站的登录页面。支持手动登录或通过JS自动填充账号密码（需确保网站允许此类操作）：

late final WebViewController webViewController;

@override
void initState() {
  super.initState();
  webViewController = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..loadRequest(Uri.parse("你的目标网站地址"));
}

2. 页面加载完成后提取文本 #

通过NavigationDelegate的onPageFinished回调，在页面加载完成时注入JS获取页面所有可见文本：

webViewController.setNavigationDelegate(
  NavigationDelegate(
    onPageFinished: (String url) async {
      // 判断当前URL是否为登录后的目标页面，避免提取登录页内容
      if (url == "登录后的目标页面地址") {
        String pageContent = await webViewController.runJavaScriptReturningResult(
          "document.body.innerText"
        ) as String;
        // 对获取到的pageContent进行分析处理
        print(pageContent);
      }
    },
  ),
);

3. 处理登录跳转逻辑 #

如果登录后页面会自动跳转，可通过onPageFinished监听URL变化，确认进入目标页面后再执行文本提取，保证获取内容的有效性。

备选库推荐 #

若webview_flutter的功能不足以满足需求，可尝试flutter_inappwebview，它提供了更细致的DOM监听、JS交互能力，能更精准地捕获页面文本。

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