Flutter在web平台使用iframe标签

主要是针对web平台，在web平台中嵌入iframe标签，将其他网站嵌入在自己的页面当中。

第一部分，只在web平台运行

1.注册iframe组件

platformViewRegistry.registerViewFactory("iframe-webview", (_) {
      ......
    });

2. 创建自己的iframe组件，并设置参数，宽高和加载的url等

platformViewRegistry.registerViewFactory("iframe-webview", (_) {
      // 2. 创建自己的iframe组件，并设置参数，宽高和加载的url等
      return IFrameElement()
        ..style.height = '100%'
        ..style.width = '100%'
        ..src = url
        ..style.border = 'none';
    });

3. 设置组件所占大小，并创建HtmlElementView

SizedBox(
        width: double.infinity,
        height: double.infinity,
        child: HtmlElementView(
          viewType: "iframe-webview",
          onPlatformViewCreated: (int id) {
            // 组件创建回调
          },
        ))

完整代码

import 'dart:html';
import 'dart:ui_web';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class IframeWebDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _IframeWebDemoState();
}

class _IframeWebDemoState extends State<IframeWebDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "iframe测试",
          style: TextStyle(fontSize: 20, color: Colors.white),
        ),
      ),
      body: _buildIframeWidget("https://flutter.dev"),
    );
  }

  Widget _buildIframeWidget(String url) {
    // var platformViewRegistry = PlatformViewRegistry();
    //注册
    platformViewRegistry.registerViewFactory("iframe-webview", (_) {
      // 2. 创建自己的iframe组件，并设置参数，宽高和加载的url等
      return IFrameElement()
        ..style.height = '100%'
        ..style.width = '100%'
        ..src = url
        ..style.border = 'none';
    });

    // 3. 设置组件所占大小，并创建HtmlElementView
    return SizedBox(
        width: double.infinity,
        height: double.infinity,
        child: HtmlElementView(
          viewType: "iframe-webview",
          onPlatformViewCreated: (int id) {
            // 组件创建回调
          },
        ));
  }
}

第二部分，如果有Android或IOS时运行会报错

注：Android或IOS平台，需要使用其他平台实现，此处不做说明：

webview_flutter：https://pub.dev/packages/webview_flutter

flutter_inappwebview：https://pub.dev/packages/flutter_inappwebview

1. 创建需要适配的类，如下：

webview_platform.dart:

import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
import '_webview_api.dart' if(dart.library.html) '_webview_html.dart' as platform;

/// 获取html的iframe组件，只适用于web，外部使用时需要判断[kIsWeb]
Widget buildWebViewWidgetPlatform(String url, {Function(int id)? onPlatformViewCreated}){
  return platform.buildWebViewWidget(url, onPlatformViewCreated: onPlatformViewCreated);
}

_webview_api.dart:

import 'package:flutter/widgets.dart';

Widget buildWebViewWidget(String url, {Function(int id)? onPlatformViewCreated}){
  throw UnsupportedError('No implementation of the [buildWebViewWidget] api provided');
}

_webview_html.dart

import 'dart:html';
import 'dart:ui_web';

import 'package:flutter/widgets.dart';

Widget buildWebViewWidget(String url, {Function(int id)? onPlatformViewCreated}) {
  var platformViewRegistry = PlatformViewRegistry();
  //注册
  platformViewRegistry.registerViewFactory("iframe-webview", (_) {
    return IFrameElement()
      ..style.height = '100%'
      ..style.width = '100%'
      ..src = url
      ..style.border = 'none';
  });

  return SizedBox(
      width: double.infinity,
      height: double.infinity,
      child: HtmlElementView(
        viewType: "iframe-webview",
        onPlatformViewCreated: (int id) {
          onPlatformViewCreated?.call(id);
        },
      ));
}

2. 在原来创建和注册iframe的地方修改为新的调用方式

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_demo/platform/webview/webview_platform.dart';

class IframeWebDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _IframeWebDemoState();
}

class _IframeWebDemoState extends State<IframeWebDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "iframe测试",
          style: TextStyle(fontSize: 20, color: Colors.white),
        ),
      ),
      body: kIsWeb ? buildWebViewWidgetPlatform("https://flutter.dev") : Text("其他平台使用InappWebView等框架实现"),
    );
  }
}

最后

如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。

如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。

相对于我们平时看的碎片化内容，这份笔记的知识点更系统化，更容易理解和记忆，是严格按照知识体系编排的。

欢迎大家一键三连支持，若需要文中资料，直接扫描文末CSDN官方认证微信卡片免费领取↓↓↓（文末还有ChatGPT机器人小福利哦，大家千万不要错过）

PS:群里还设有ChatGPT机器人，可以解答大家在工作上或者是技术上的问题