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

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)

<script src="https://yookassa.ru/checkout-widget/v1/checkout-widget.js"></script>

<!--HTML-element to render the form-->
<div id="payment-form"></div>

<script>
const checkout = new window.YooMoneyCheckoutWidget({
    confirmation_token: foo(),
    return_url: 'https://app.moneyhat.ru/',
    customization: {

        colors: {

            controlPrimary: '#00BF96'
        }
    },
    error_callback: function(error) {

    }
});


checkout.render('payment-form');
</script>

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

javascripthtmldartflutter-web


Solution 1:[1]

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

In your dart file inside build method

final data = <String, dynamic>{};
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

<html>

<head>
    <style>
        .card-container {
            display: flex;
            height: 45px;
            max-width: 100%;
            overflow-x: hidden;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    </style>
</head>

<body>
    <div class="card-container">
        <form>
            <input type="text" id="imagename" value="" />
            <input type="button" id="btn" value="GO" />
        </form>
    </div>

    <script type="text/javascript">
        window.parent.addEventListener('message', handleMessage, false);

        function handleMessage(e) {
            var data = JSON.parse(e.data);
            console.log(data);
        }

        
        
    </script>
</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 vivek_ios

Related Questions