我可以在Flutter网站上使用两个iframe吗？

问题描述

我是Flutter的新手，我正在开发一个学习的网页。 我想使用两个iframe放置Google地图和Facebook Feed。

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

如果我仅使用一个iframe，则效果很好，但是如果使用第二个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,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,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,);
  }
}

谢谢：）

解决方法

是的，您可以在Flutter网站中使用两个iframe。

但是，如果那样做将无法正常工作。 相反，在我的代码中，我传递了链接。

只需使用两个具有不同viewID的IframeWidget。 在这里，我用它在我的网站上获得了我的社交媒体项目。

GraphrMedia (Go to Work Section) [Might take 12 sec time to load.]

printf -v VERSION_CODE '%(%Y%m.%d.%H%M)T'

,

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

//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,);
  }
}

请注意，从 Dart SDK 中的 this change 起，抑制 undefined_prefixed_name 错误不再有效。但是有一个未解决的问题要恢复 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(),);
  }
}