如何使用Dart从Flutter的WebView中通过类名获取图片的src地址

实现方案 #

你已经开启了JavascriptMode.unrestricted权限，满足执行JS查询DOM的前提，只需要补充页面加载完成回调、执行对应JS查询脚本即可，完整实现代码如下：

child: WebView(
  initialUrl: shop.link,
  javascriptMode: JavascriptMode.unrestricted,
  gestureRecognizers: gestureRecognizers,
  onWebViewCreated: (WebViewController webViewController) {
    _controller.complete(webViewController);
  },
  // 新增页面加载完成回调，确保DOM已渲染
  onPageFinished: (String url) async {
    final webViewController = await _controller.future;
    // 替换target-image-class为你需要匹配的实际类名
    const getImgSrcScript = '''
      (function() {
        const targetImgs = document.getElementsByClassName('target-image-class');
        // 取第一个匹配的图片src，需获取全部的话自行改返回数组即可
        return targetImgs.length > 0 ? targetImgs[0].src : '';
      })();
    ''';
    // 执行JS并获取返回结果
    final imgSrc = await webViewController.runJavascriptReturningResult(getImgSrcScript);
    // 处理返回结果（部分版本返回值会自带引号，可按需去除）
    final cleanedSrc = imgSrc.replaceAll('"', '');
    // 此处编写你的业务逻辑使用cleanedSrc
    print('匹配到的图片src：$cleanedSrc');
  },
),

补充说明 #

• 若需要获取所有匹配类名的图片src，修改JS脚本返回数组即可：

  (function() {
    const targetImgs = document.getElementsByClassName('target-image-class');
    return Array.from(targetImgs).map(item => item.src);
  })();
  

• 若目标元素是页面懒加载生成的，可以给JS执行加延迟，例如：

  // 延迟1秒执行，等懒加载内容渲染完成
  Future.delayed(const Duration(seconds: 1), () async {
    final imgSrc = await webViewController.runJavascriptReturningResult(getImgSrcScript);
  });
  

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