主要是針對web平臺，在web平臺中嵌入iframe標(biāo)簽详炬，將其他網(wǎng)站嵌入在自己的頁面當(dāng)中盐类。

第一部分，只在web平臺運行

1.注冊iframe組件

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

2. 創(chuàng)建自己的iframe組件呛谜，并設(shè)置參數(shù)在跳，寬高和加載的url等

platformViewRegistry.registerViewFactory("iframe-webview", (_) {
      // 2. 創(chuàng)建自己的iframe組件，并設(shè)置參數(shù)隐岛，寬高和加載的url等
      return IFrameElement()
        ..style.height = '100%'
        ..style.width = '100%'
        ..src = url
        ..style.border = 'none';
    });

3. 設(shè)置組件所占大小猫妙，并創(chuàng)建HtmlElementView

SizedBox(
        width: double.infinity,
        height: double.infinity,
        child: HtmlElementView(
          viewType: "iframe-webview",
          onPlatformViewCreated: (int id) {
            // 組件創(chuàng)建回調(diào)
          },
        ))

完整代碼

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. 創(chuàng)建自己的iframe組件，并設(shè)置參數(shù)聚凹，寬高和加載的url等
      return IFrameElement()
        ..style.height = '100%'
        ..style.width = '100%'
        ..src = url
        ..style.border = 'none';
    });

    // 3. 設(shè)置組件所占大小割坠，并創(chuàng)建HtmlElementView
    return SizedBox(
        width: double.infinity,
        height: double.infinity,
        child: HtmlElementView(
          viewType: "iframe-webview",
          onPlatformViewCreated: (int id) {
            // 組件創(chuàng)建回調(diào)
          },
        ));
  }
}

第二部分，如果有Android或IOS時運行會報錯

注：Android或IOS平臺妒牙，需要使用其他平臺實現(xiàn)韭脊，此處不做說明：

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

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

1. 創(chuàng)建需要適配的類，如下：

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. 在原來創(chuàng)建和注冊iframe的地方修改為新的調(diào)用方式

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等框架實現(xiàn)"),
    );
  }
}

注：以上示例已上傳Gitee，請參考：https://gitee.com/ttxz/flutter/blob/master/lib/pages/iframe_web_demo.dart