Flutter中如何从HTML响应里提取iframe的src链接？

安全阿岳

2026-8-10

从HTML中提取iframe的src链接（Dart实现）

你当前的代码仅提取了HTML的文本内容，无法获取iframe标签的属性值。要拿到Vimeo视频的src链接，需要定位到iframe元素并读取其src属性，具体实现如下：

步骤1：引入依赖

确保你的pubspec.yaml中添加了html库，用于解析HTML：

dependencies:
  html: ^0.15.4 # 请使用最新版本

步骤2：编写提取代码

import 'package:html/parser.dart' show parse;
import 'package:html/dom.dart';
import 'dart:convert';

void extractVimeoUrl(String htmlContent) {
  // 解析HTML内容
  Document doc = parse(htmlContent);
  
  // 直接定位包含Vimeo链接的iframe（如果只需要第一个，用querySelector即可）
  Element? vimeoIframe = doc.querySelector('iframe[src*="player.vimeo.com"]');
  
  if (vimeoIframe != null) {
    String? src = vimeoIframe.attributes['src'];
    if (src != null) {
      // 将HTML转义的&amp;还原为&，得到标准链接格式
      String vimeoLink = src.replaceAll('&amp;', '&');
      print('提取到的Vimeo链接：$vimeoLink');
    }
  }
}

// 调用示例（适配接口返回的JSON格式数据）
void main() {
  // 模拟接口返回的JSON字符串
  String responseJson = '''
  {
    "rendered": "<div style=\"padding: 56.25% 0 0 0; position: relative;\"><iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" title=\"Shrewsberry\" src=\"https://player.vimeo.com/video/1000224?h=23334&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"></iframe></div>"
  }
  ''';
  
  // 解析JSON拿到HTML内容
  Map<String, dynamic> data = jsonDecode(responseJson);
  String html = data['rendered'];
  
  // 执行链接提取
  extractVimeoUrl(html);
}