Flutter中HTML解析异常问题：浏览器与Flutter端DOM节点查询结果不一致排查

你遇到的这个情况，主要有两个常见的核心原因：

1. 请求的User-Agent差异 #

浏览器在请求网页时，会自动带上标识自身的User-Agent请求头，而Flutter的http包默认的UA是类似Dart/3.0 (dart:io)这类非浏览器标识。很多网站会根据不同的UA返回差异化内容——比如给移动端UA返回适配手机的简化页面，或者对非浏览器UA做内容限制，导致你通过http.get拿到的原始HTML和浏览器里看到的完全不一样，自然找不到目标元素。

2. 页面内容是JavaScript动态渲染的 #

浏览器里能看到的swiper-slide元素，大概率是页面加载完成后通过JS动态生成的。而http.get获取的只是服务器返回的静态原始HTML，并不会执行页面中的JavaScript代码，这些动态生成的元素在原始HTML里根本不存在，querySelectorAll自然查不到任何结果。

方案一：修改请求的User-Agent，模拟浏览器请求 #

你可以给http.get请求添加浏览器的UA头，尝试拿到和浏览器一致的HTML内容。示例代码如下：

Future getData() async {
  var url = Uri.parse('https://www.kitapyurdu.com');
  var response = await http.get(
    url,
    headers: {
      'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36',
    },
  );
  var document = parse(response.body);
  var v = document.querySelectorAll("div.swiper-container ul.product-grid li.swiper-slide").length;
  print(v.toString());
}

注意：部分网站可能还有其他反爬机制，这个方法不一定百分百生效，但可以优先尝试。

方案二：使用支持JS渲染的WebView类库 #

如果页面内容是JS动态生成的，http+html包就无能为力了，得用能加载页面并执行JS的库，比如flutter_inappwebview或者官方的webview_flutter。这里以flutter_inappwebview为例，代码示例：

首先在pubspec.yaml里添加依赖：

dependencies:
  flutter_inappwebview: ^6.0.0

然后修改你的Widget：

class Home extends StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  InAppWebViewController? webViewController;

  @override
  Widget build(BuildContext context) {
    return InAppWebView(
      initialUrlRequest: URLRequest(url: Uri.parse('https://www.kitapyurdu.com')),
      onWebViewCreated: (controller) {
        webViewController = controller;
      },
      onLoadStop: (controller, url) async {
        // 页面加载完成后执行JS代码，和浏览器里的操作一致
        var result = await controller.evaluateJavascript(source: '''
          document.querySelectorAll("div.swiper-container ul.product-grid li.swiper-slide").length.toString();
        ''');
        print('元素数量：$result');
      },
    );
  }
}

这个方法能模拟真实浏览器的运行环境，完整执行页面中的JS逻辑，所以能拿到和浏览器完全一致的结果。

方案三：查找网站的官方API（最优解） #

如果网站提供了公开的API接口，直接调用API获取数据是最可靠、最高效的方式——不需要解析复杂的HTML结构，还能避开反爬限制。你可以打开浏览器的开发者工具（Network面板），查看页面加载时的XHR/fetch请求，看看有没有获取商品列表的API接口，然后直接在Flutter里请求这个API拿到结构化数据。

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