我目前正在使用 flutter web，并且我已经有一个 html 按钮，我想将其添加到我的 flutter 应用程序中。该 html 包含一个 java 脚本作为其主体。如何使用 javascript 添加 html 作为我的应用程序中的小部件？这是 html 片段:
<!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>
希望您能给我一些帮助。
最佳答案
你可以这样做。您应该将与 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,
),
);
}
关于javascript - 使用 html 代码和 javascript 代码作为 flutter web 中的小部件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59600520/