flutter - 如何从 flutter web 的 HtmlElementView 执行 iframe 功能

Question

我在 HtmlElementView 上使用了 iframeElement，而 iframeElement 上有一个错误，即 flutter 按钮无法触发 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') 总是返回 null，即使我在 Chrome 控制台尝试查询，仍然返回 null。如何从 flutter 的 HtmlElementView 访问 iframe 元素和函数？

Answer 1

哦，我找到了可以访问iframe的方法

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