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：pub.dev/packages/we...

flutter_inappwebview：pub.dev/packages/fl...

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等框架实现"),
    );
  }
}

👀关注公众号：Android老皮！！！欢迎大家来找我探讨交流👀