How to pass from Flutter Web to html file (HTMLElement, iframe) arguments for the JS script?

Question

I want to render a pay widget in the Flutter web app and I need a unique token there, so I calling Iframe from Dart to render it. However I didn't find how to send parameters or call a dart func (only about dart func, but this doesn't work)

this is part from Main.dart

String foo() {
    return "ct-2830b393-000f-5000-8000-19466365c438";
  }

  js.context['foo'] = foo;

here I'm calling HTMLELEMNT from iframe

final html.IFrameElement _iframeElement = html.IFrameElement();
    _iframeElement.height = MediaQuery.of(context).size.height.toString();
    _iframeElement.width = MediaQuery.of(context).size.width.toString();
    _iframeElement.src =
    'paywall.html';
    _iframeElement.style.border = 'none';
    _iframeElement.id = 'iframe';
    final wrapper = html.DivElement()
      ..style.width = '100%'
      ..style.height = '100%';
    wrapper.append(_iframeElement);

    
    // ignore: UNDEFINED_PREFIXED_NAME
    ui.platformViewRegistry.registerViewFactory(
      viewID,
          (int viewId) => wrapper,
    );

    return Scaffold(
        body: SizedBox(
      height: 500,
      child: HtmlElementView(
        viewType: viewID,
      ),
    ));

Please help me to find a way to call dart func from JS of pass 2 String parameters in Flutter Web

user_1184739 · Answer

You can do something like . You need to use html.window.postMessage(json, "*");

In your dart file inside build method

final data = {};
final jsonEncoder = JsonEncoder();
final json = jsonEncoder.convert(data);

final iframe = html.IFrameElement()
      ..src = 'assets/assets/html/show_images.html'
      ..style.border = 'none'
      ..onLoad.listen(
        (event) async {
          html.window.onMessage.listen((event) {
            if (event.data == null) {
              return;
            }
            print(event.data);
          });
          html.window.postMessage(json, "*");
        },
      );
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(viewId, (int id) {
      return iframe;
    });

in html file

How to pass from Flutter Web to html file (HTMLElement, iframe) arguments for the JS script?

1 Answers