JS腳本如何從Flutter Web傳遞到html文件（HTMLElement，iframe）arguments？

Question

我想在 Flutter web 應用程序中呈現一個付費小部件，我需要一個唯一的令牌，所以我從 Dart 調用 Iframe 來呈現它。 但是我沒有找到如何發送參數或調用 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>

這是Main.dart的一部分

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

  js.context['foo'] = foo;

在這里，我從 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,
      ),
    ));

請幫助我找到一種方法來從 Flutter Web 中傳遞 2 字符串參數的 JS 調用 dart func

Answer 1

你可以做類似的事情。 你需要使用 html.window.postMessage(json, "*");

在您的 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;
    });

在 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