javascript - Using html code with a javascript code as a widget in flutter web
问题描述
I am currently using flutter web and I already have an html button that I want to add inside my flutter app. This html contains a java script as its body. How to add the html with javascript as a widget inside my app? This is the html snippet:
<!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>
Hope you provide me with some help.
解决方案
你可以去这样的事情。你应该把你的 html 相关代码放在 index.html 文件中,并且src
你需要为你的index.html
eg放置一个路径'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,
),
);
}
推荐阅读
- java - 在android中的不同类之间共享String的内容
- c++ - 计算字符串集合 S 在 trie T 中出现的总和
- jsf - 标签的 EL 大括号表示法
- javascript - Nodejs模块“worker_threads”返回错误“错误:此Node实例使用的V8平台不支持创建Workers”
- kubernetes - 如何在 Spring Data Flow Server 中创建任务应用程序并使用 Kubernetes 挂载远程目录?
- powershell - 比较未返回正确信息的字符串
- python - 将重复的行转换为带有标题的多列
- flutter - 如何在 Flutter 中匹配容器的宽度和其他容器?
- phpunit - 在 Moodle 中以编程方式完成课程并设置成绩
- excel - 仅从工作表中复制最后一行并将其粘贴到另一张工作表的最后一行