ana*_*shi 10 html javascript web flutter paytabs
我目前正在使用 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.htmleg放置一个路径'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,
),
);
}
jam*_*sco -1
您可以使用HtmlElementView在 flutter web 应用程序中添加 html 元素 https://api.flutter.dev/flutter/widgets/HtmlElementView-class.html
请注意，这只适用于 flutter web 和
嵌入 HTML 是一项昂贵的操作，当可以使用 Flutter 等效项时应该避免
您应该将此 html 内容添加到文件 web/main.html 中。
我建议您使用 Flutter 构建按钮并使用 dart 调用 javascript 代码，就像这个示例从 Dart 调用 javascript一样