我可以在Flutter网站上使用两个iframe吗? [英] Can i use two iframes on Flutter web?

问题描述

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

I'm new in Flutter and i'm developing a little web page for learn. I wanna put a google map and facebook feed using two iframe.

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

I base my code on Wangoo's code here: https://medium.com/flutter-community/flutter-web-and-iframe-f26399aa1e2a

如果我仅使用一个iframe，则效果很好，但如果使用第二个iframe，则它具有第一个来源，而第一个则不显示任何内容.像这样: https://imgur.com/a/eWq2GU5

If i use only one iframe it works perfect but if i use a second one it has the first's source and the first one doesn't show anything. Like this: https://imgur.com/a/eWq2GU5

已经测试了其他一些程序包，但是大多数程序包与网络不兼容，或者不能使用具有此类链接的iframe

Already test some others packages but the most isn't web compatible or just can't use an iframe with link like those ones

这是我的代码:

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

谢谢:)

推荐答案

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

Yes, you can use Two Iframes in the Flutter web.

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

But it won't work if you do it like that. Instead, In my code, I pass the links.

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

Just Use two IframeWidget with different viewIDs'. Here I used it to get my Social media Project on my Website.

GraphrMedia(转到工作"部分)[可能需要12秒钟的时间才能加载.]

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

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

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

_iframeElement2.src = _source[1];
_iframeElement2.style.border = 'none';

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

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


@override
Widget build(BuildContext context) {
 return Row(
    mainAxisAlignment: MainAxisAlignment.center,
 children:[
  Container(
    color: Colors.blue,
    child: SizedBox(
      height: _height,
      width: _width[0],
      child:_iframeWidget[0],
    ),
  ), Container(
    color: Colors.red,
    child: SizedBox(
      height: _height,
      width: _width[1],
      child:_iframeWidget[1],
    ),
  ),
],
);
}

这篇关于我可以在Flutter网站上使用两个iframe吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！