在flutter web中使用带有javascript代码的html代码作为小部件答案

【问题标题】：Using html code with a javascript code as a widget in flutter web在flutter web中使用带有javascript代码的html代码作为小部件
【发布时间】：2020-04-23 07:31:00
【问题描述】：

我目前正在使用 Flutter Web，并且我已经有一个要添加到我的 Flutter 应用程序中的 html 按钮。这个 html 包含一个 java 脚本作为它的主体。如何在我的应用程序中添加带有 javascript 的 html 作为小部件？这是html sn-p：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Paytabs Express Checkout V4</title>
  </head>
  <body>
    <script
      src="https://paytabs.com/express/v4/paytabs-express-checkout.js"
      id="paytabs-express-checkout"
      data-secret-key="key"
      data-ui-type="button"
      data-merchant-id="mid"
      data-url-redirect="https://my09713z28.codesandbox.io/"
      data-amount="3.3"
      data-currency="SAR"
      data-title="John Doe"
      data-product-names="click"
      data-order-id="25"
      data-ui-show-header="true"
      data-customer-phone-number="5486253"
      data-customer-email-address="john.deo@paytabs.com"
      data-customer-country-code="973"
      data-ui-show-billing-address="false"
      data-billing-full-address="test test test"
      data-billing-city="test"
      data-billing-state="test"
      data-billing-country="BHR"
      data-billing-postal-code="123"
    ></script>
    <script>

    </script>
  </body>
</html>

希望你能给我一些帮助。

【问题讨论】：

标签： javascript html web flutter paytabs

【解决方案1】：

你可以这样做。您应该将与 html 相关的代码放在 index.html 文件中，并且在 src 中，您需要为您的 index.html 添加路径，例如'assets/index.html'

import 'dart:html' as html;
import 'dart:js' as js;
import 'dart:ui' as ui;

String viewID = "your-view-id";

  @override
  Widget build(BuildContext context) {
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
        viewID,
            (int id) => html.IFrameElement()
          ..width = MediaQuery.of(context).size.width.toString()
          ..height = MediaQuery.of(context).size.height.toString()
          ..src = 'path/to/your/index.html'
          ..style.border = 'none');

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

【讨论】：

【解决方案2】：

您可以使用 HtmlElementView 在 Flutter Web 应用程序中添加 html 元素 https://api.flutter.dev/flutter/widgets/HtmlElementView-class.html

请注意，这只适用于 Flutter Web 和

嵌入 HTML 是一项昂贵的操作，应避免颤振等效是可能的

您应该在文件 web/main.html 中添加此 html 内容。

我建议你使用 Flutter 构建按钮并使用 dart 调用 javascript 代码，例如这个示例 calling javascript from Dart

【讨论】：

我以前没有使用 javascript 的知识。如何将上面的html代码转换成可调用的javascript函数？？
我更深入地研究了 js 所做的事情并生成了 ui，所以我为什么要尝试创建一个带有 <div> 的 HtmlElementView 和一个自定义 id 并将这个 id 添加到参数data-ui-element-id
我仍然不知道如何在我的应用程序中实现这个 html。您能否提供一些带有 html/javascript 实现的 dart 示例代码
看这里：stackoverflow.com/questions/60276170/…
flutter 将带有 id 的 div 放在 shadow dom 中，因此窗口上的 getElementById 将找不到它。

【解决方案3】：

如果我理解正确，您的意图是能够将您的 html/javascript 渲染为原生 widget。

不幸的是，我认为这在技术上是不可能的，因为 Flutter 是在其自己的轻量级渲染引擎中渲染所有内容，而不是创建本地运行时执行的本地代码。编译后创建的工件（即使在 Flutter Web 中）是 flutter runtime + 您在 Flutter runtime 上执行的编译代码的组合。因此，不可能将 html/javascript 作为小部件添加到您的颤振代码中并在任何地方运行它。

解决方案是在纯 Dart 代码中实现您的小部件。

【讨论】：