Flutter Web、Android、iOS多平台集成IFrame问题求助

1. 支持三平台的通用适配包 #

目前pub.dev没有完全覆盖三平台的通用IFrame包，但flutter_inappwebview是个靠谱的选择——它对Android、iOS和Flutter Web都有较好的支持，能直接处理IFrame加载、HTML内容渲染等场景，比单独拆分处理更省心。如果不想额外引入包，也可以用原生API组合实现。

2. 无通用包时的推荐方案 #

• Android/iOS端：继续用webview_flutter，它能直接加载IFrame的src链接，也能渲染包含完整IFrame的HTML内容。
• Web端：借助Flutter Web的dart:html库创建IFrameElement，再通过HtmlElementView将其嵌入Flutter界面，这是官方原生支持的Web元素嵌入方式。
• 统一封装：用kIsWeb做平台判断，把两端的渲染逻辑封装到同一个Widget里，上层调用无需关心平台差异。

3. 完善后的代码实现 #

以下代码支持两种使用方式：传入IFrame的src链接，或者直接传入完整的IFrame HTML代码。

完整代码 #

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart' show kIsWeb;
import 'package:webview_flutter/webview_flutter.dart';
// Web端专属依赖
import 'dart:html' as html;
import 'dart:ui' as ui;

class ShowIframe extends StatefulWidget {
  const ShowIframe({
    Key? key,
    this.link, // 传入IFrame的src链接
    this.iframeHtml, // 传入完整的IFrame HTML代码
  })  : assert(link != null || iframeHtml != null, "必须传入link或iframeHtml其中一个"),
        super(key: key);

  final String? link;
  final String? iframeHtml;

  @override
  State<ShowIframe> createState() => _ShowIframeState();
}

class _ShowIframeState extends State<ShowIframe> {
  // Web端注册视图用的唯一ID
  final String _iframeViewId = 'iframe-view-${DateTime.now().millisecondsSinceEpoch}';

  @override
  void initState() {
    super.initState();
    if (kIsWeb) {
      if (widget.iframeHtml != null) {
        // 注册加载完整IFrame代码的视图
        ui.platformViewRegistry.registerViewFactory(
          _iframeViewId,
          (int viewId) {
            final html.IFrameElement iframe = html.IFrameElement()
              ..srcdoc = widget.iframeHtml!
              ..style.border = 'none'
              ..style.width = '100%'
              ..style.height = '100%';
            return iframe;
          },
        );
      } else if (widget.link != null) {
        // 注册加载src链接的视图
        ui.platformViewRegistry.registerViewFactory(
          _iframeViewId,
          (int viewId) {
            final html.IFrameElement iframe = html.IFrameElement()
              ..src = widget.link!
              ..style.border = 'none'
              ..style.width = '100%'
              ..style.height = '100%'
              ..allowFullscreen = true;
            return iframe;
          },
        );
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(kIsWeb ? 'Iframe on Flutter Web' : 'Iframe on Android & iOS'),
      ),
      body: kIsWeb
          ? HtmlElementView(viewType: _iframeViewId)
          : WebView(
              initialUrl: _getMobileInitialUrl(),
              javascriptMode: JavascriptMode.unrestricted,
              gestureNavigationEnabled: true,
            ),
    );
  }

  // 处理移动端加载逻辑：兼容src链接和完整IFrame代码
  String? _getMobileInitialUrl() {
    if (widget.link != null) {
      return widget.link;
    } else if (widget.iframeHtml != null) {
      // 将HTML内容转为data URL格式加载
      return 'data:text/html;utf8,${Uri.encodeComponent(widget.iframeHtml!)}';
    }
    return null;
  }
}

使用示例 #

方式1：传入src链接

ShowIframe(link: 'https://www.youtube.com/embed/yRlwOdCK7Ho')

方式2：传入完整IFrame代码

ShowIframe(
  iframeHtml: '''
<iframe width="560" height="315" src="https://www.youtube.com/embed/yRlwOdCK7Ho" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
''',
)

代码说明 #

• Web端：通过ui.platformViewRegistry注册IFrame元素，用HtmlElementView渲染，支持直接加载src链接或完整HTML代码（用srcdoc属性）。
• 移动端：如果是完整IFrame代码，将其转成data:text/html格式的URL传给WebView加载；如果是src链接，直接传入即可。
• 增加了参数校验，确保必须传入link或iframeHtml其中一个。

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