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 {
  
  State<StatefulWidget> createState() => _IframeWebDemoState();
}

class _IframeWebDemoState extends State<IframeWebDemo> {
  
  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 {
  
  State<StatefulWidget> createState() => _IframeWebDemoState();
}

class _IframeWebDemoState extends State<IframeWebDemo> {
  
  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开发的各个知识点。
img
相对于我们平时看的碎片化内容,这份笔记的知识点更系统化,更容易理解和记忆,是严格按照知识体系编排的。

欢迎大家一键三连支持,若需要文中资料,直接扫描文末CSDN官方认证微信卡片免费领取↓↓↓(文末还有ChatGPT机器人小福利哦,大家千万不要错过)
Flutter在web平台使用iframe标签_第1张图片

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

图片

你可能感兴趣的:(flutter,前端,android)