Flutter Windows桌面应用：如何通过WebView加载IFrame？

API 探路者

2026-7-21

Flutter Windows桌面应用嵌入IFrame的解决方案

核心思路

Windows桌面端没有原生IFrame组件，但可以借助Windows专属的WebView插件，先加载目标页面提取IFrame的资源地址或完整内容，再将其单独加载到本地WebView中实现需求。

具体实现步骤

添加Windows WebView依赖
使用专门适配Windows的webview_windows包，在pubspec.yaml中添加依赖：
```
dependencies:
  webview_windows: ^0.2.0
```

加载目标页面并提取IFrame信息
初始化WebView控制器后加载目标页面，通过JS脚本提取指定IFrame的src地址或完整HTML代码：

final controller = WebviewController();

// 初始化控制器并加载目标页面
await controller.initialize();
await controller.loadUrl('https://目标页面的完整地址');

// 执行JS获取IFrame的src地址
String iframeSrc = await controller.evaluateJavascript('''
  const targetIframe = document.querySelector('你的IFrame选择器，比如#target-iframe');
  targetIframe ? targetIframe.src : '';
''');

// 若需要获取IFrame的完整HTML内容，可改用这段JS
String iframeFullHtml = await controller.evaluateJavascript('''
  const targetIframe = document.querySelector('你的IFrame选择器');
  targetIframe ? targetIframe.outerHTML : '';
''');

加载提取到的IFrame内容
根据提取到的内容类型，选择对应方式加载到WebView中：

// 加载IFrame的独立地址
if (iframeSrc.isNotEmpty) {
  await controller.loadUrl(iframeSrc);
}

// 或直接加载IFrame的完整HTML代码
if (iframeFullHtml.isNotEmpty) {
  await controller.loadHtmlString(iframeFullHtml);
}