JS脚本如何从Flutter Web传递到html文件（HTMLElement，iframe）arguments？

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.我想在 Flutter web 应用程序中呈现一个付费小部件，我需要一个唯一的令牌，所以我从 Dart 调用 Iframe 来呈现它。 However I didn't find how to send parameters or call a dart func (only about dart func, but this doesn't work)但是我没有找到如何发送参数或调用 dart func（只有大约 dart func，但这不起作用）

<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这是Main.dart的一部分

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

  js.context['foo'] = foo;

here I'm calling HTMLELEMNT from iframe在这里，我从 iframe 呼叫 HTMLELEMNT

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请帮助我找到一种方法来从 Flutter Web 中传递 2 字符串参数的 JS 调用 dart func

Answer 1

You can do something like.你可以做类似的事情。 You need to use html.window.postMessage(json, "*");你需要使用 html.window.postMessage(json, "*");

In your dart file inside build method在您的 dart 文件中的构建方法中

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 文件中

<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>

JS脚本如何从Flutter Web传递到html文件（HTMLElement，iframe）arguments？

问题描述

1 个解决方案

解决方案1
0 2022-05-05 06:48:57

JS脚本如何从Flutter Web传递到html文件（HTMLElement，iframe）arguments？

问题描述

1 个解决方案

解决方案1 0 2022-05-05 06:48:57

解决方案1
0 2022-05-05 06:48:57