flutter - 我可以在 Flutter Web 上使用两个 iframe 吗？

Question

我是 Flutter 的新手，我正在开发一个小网页以供学习。我想使用两个 iframe 放置 google map 和 facebook feed。

我的代码基于 Wangoo 的代码: https://medium.com/flutter-community/flutter-web-and-iframe-f26399aa1e2a

如果我只使用一个 iframe，它工作完美，但如果我使用第二个，它有第一个的来源，而第一个不显示任何内容。像这样: https://imgur.com/a/eWq2GU5

已经测试了一些其他包，但大多数不兼容网络，或者只是不能像那些那样使用带有链接的 iframe

这是我的代码:

import 'package:flutter/material.dart';

//ignore: avoid_web_libraries_in_flutter
import 'dart:html';
import 'dart:ui' as ui;

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  String linkMaps = 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d10500.899078315058!2d2.29133003705264!3d48.853924135746475!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e6701f7e8337b5%3A0xa2cb58dd28914524!2sEiffel%20Tower%2C%20Par%C3%ADs%2C%20Francia!5e0!3m2!1ses-419!2smx!4v1597383453609!5m2!1ses-419!2smx';
  String linkFB = 'https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FTourEiffel&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId';

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
    body:  Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(color: Colors.red, child: new IframeScreen(400, 400, linkMaps)),
          Container(color: Colors.blue, child: new IframeScreen(340, 400, linkFB))
        ],
      ),
    )
    );
  }
}
 
//--------------------------------------------------------------------------I
//Code based on: Aseem Wangoo (Mar-22)                                      I
//https://medium.com/flutter-community/flutter-web-and-iframe-f26399aa1e2a  I
//--------------------------------------------------------------------------I

// ignore: must_be_immutable
class IframeScreen extends StatefulWidget {
  double w;
  double h;
  String src;

  IframeScreen(double _w, double _h, String _src){
    this.w = _w;
    this.h = _h;
    this.src = _src;
  }

  @override
  _IframeScreenState createState() => _IframeScreenState(w, h, src);
}


class _IframeScreenState extends State<IframeScreen> {
  Widget _iframeWidget;
  final IFrameElement _iframeElement = IFrameElement();
  double _width;
  double _height;
  String _source;

  _IframeScreenState(double _w, double _h, String _src){
    _width = _w;
    _height = _h;
    _source = _src;
  }

  @override
  void initState() {
    super.initState();
    _iframeElement.src = _source;
    _iframeElement.style.border = 'none';

    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
      'iframeElement',
    (int viewId) => _iframeElement,
    );

    _iframeWidget = HtmlElementView(
      key: UniqueKey(),
      viewType: 'iframeElement',
    );
  }


  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: _height,
      width: _width,
      child: _iframeWidget,
    );
  }
}

谢谢:)

Answer 1

这是一个更简洁的 iframe 小部件版本:

Dartpad example

//ignore: avoid_web_libraries_in_flutter
import 'dart:html';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';

class IframeView extends StatefulWidget {
  final String source;

  const IframeView({Key key, @required this.source}) : super(key: key);

  @override
  _IframeViewState createState() => _IframeViewState();
}

class _IframeViewState extends State<IframeView> {
  // Widget _iframeWidget;
  final IFrameElement _iframeElement = IFrameElement();

  @override
  void initState() {
    super.initState();
    _iframeElement.src = widget.source;
    _iframeElement.style.border = 'none';

    //ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
      widget.source, //use source as registered key to ensure uniqueness
      (int viewId) => _iframeElement,
    );
  }

  @override
  Widget build(BuildContext context) {
    return HtmlElementView(
      key: UniqueKey(),
      viewType: widget.source,
    );
  }
}

请注意，自 this change 以来，抑制 undefined_prefixed_name 错误不再有效在 Dart SDK 中。但是有一个悬而未决的问题要恢复here .

然后您可以使用大小框内的小部件来限制它的高度/宽度。下面是在脚手架主体中使用它的示例:

//main.dart

import 'package:flutter/material.dart';

void main() async {
  runApp(IFrameTesterApp());
}

class IFrameTesterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('IFrame Tester App'),
            centerTitle: true,
          ),
          body: IframeView(source: "https://url.to.resource")),
      theme: ThemeData.light(),
    );
  }
}