Как выполнить функцию iframe из HtmlElementView веб-сайта флаттера - PullRequest
Новая
       11

Как выполнить функцию iframe из HtmlElementView веб-сайта флаттера

0 голосов
/ 14 апреля 2020

Я использовал iframeElement в HtmlElementView, и в iframeElement есть ошибка, из-за которой кнопка флаттера не может вызвать событие в виджете Stack, поэтому я обертываю его в элемент div. 

class _BroadcastViewState extends State<BroadcastView> {
  @override
  void didChangeDependencies() {
    final IFrameElement iframeElement = IFrameElement();
    iframeElement.height = MediaQuery.of(context).size.height.toString();
    iframeElement.width = MediaQuery.of(context).size.width.toString();
    iframeElement.src =
        '/assets/index.html';
    iframeElement.style.border = 'none';
    iframeElement.id = 'iframe';
    final wrapper = DivElement()
      ..style.width = '100%'
      ..style.height = '100%';
    wrapper.append(iframeElement);
    // ignore:undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
      BroadcastView.createViewId,
      (int viewId) => wrapper,
    );
  }

  @override
  Widget build(BuildContext context) {
    return HtmlElementView(
      viewType: BroadcastView.createViewId,
    );
  }
}

И я использовал виджет Stack для добавления кнопки и запуска метода iframe 

import 'dart:html';
import 'dart:js';

class BroadcastScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          BroadcastView(),
          Positioned.fill(
            child: Align(
              alignment: Alignment.bottomRight,
              child: RawMaterialButton(
                onPressed: () {
                  IFrameElement frame = querySelector('#iframe');
                  var jsFrame = new JsObject.fromBrowserObject(frame);
                  JsObject jsDocument = jsFrame['contentDocument'];
                  jsDocument.callMethod('join');
                },
                child: new Icon(
                  Icons.live_tv,
                  color: Colors.white,
                  size: 25.0,
                ),
                shape: new CircleBorder(),
                elevation: 2.0,
                fillColor: Theme.of(context).primaryColor,
                padding: const EdgeInsets.all(15.0),
              ),
            ),
          )
        ],
      ),
    );
  }
}

Однако querySelector ('# iframe') всегда возвращает ноль, даже я пытался запрос на консоли Chrome все еще возвращает ноль. Как получить доступ к элементу и функции iframe из HtmlElementView флаттера?

1 Ответ

0 голосов
/ 14 апреля 2020

О, я нашел способ получить доступ к iframe 

document.querySelector('flt-platform-view').shadowRoot.querySelector('iframe')
...