Flutter Web：使用 HtmlElementView、IFrameElement、registerViewFactory 实现的解决方案在 ios 中不起作用
Posted
技术标签:
【中文标题】Flutter Web：使用 HtmlElementView、IFrameElement、registerViewFactory 实现的解决方案在 ios 中不起作用【英文标题】：Flutter Web: Implemented solution using HtmlElementView, IFrameElement, registerViewFactory is not working in ios 【发布时间】：2021-04-28 15:08:27 【问题描述】：我已经实现了一个解决方案，将在线支付网关集成到我的 Flutter Web 项目中，到目前为止，除了这个之外，我还没有找到任何其他解决方案。我在 Flutter Web 项目中实现的解决方案的链接是 This 以供参考，现在的问题是，这在 android web 中运行良好，但在 ios web 中不起作用，我不知道为什么。 谁能帮我解决这个问题或为什么它在 iOS 中不起作用？或任何其他在 Flutter Web 中实现支付网关的解决方案。
下面是我从那篇文章中实现的代码。
UiFake.dart
import 'dart:ui' as ui;
// ignore: camel_case_types
class platformViewRegistry
static registerViewFactory(String viewId, dynamic cb)
ui.platformViewRegistry.registerViewFactory(viewId, cb);
web/payment.html
<!DOCTYPE html><html>
<meta name="viewport" content="width=device-width">
<head><title>RazorPay Web Payment</title></head>
<body>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
var options =
"key": "YOUR_KEY_HERE",
"amount": "50000", "currency": "INR",
"name": "Acme Corp",
"description": "Test Transaction",
"image": "https://example.com/your_logo",
"handler": function (response)
window.parent.postMessage("SUCCESS","*"); //2
alert(response.razorpay_payment_id);
alert(response.razorpay_order_id);
alert(response.razorpay_signature)
,
"prefill":
"name": "Gaurav Kumar",
"email": "gaurav.kumar@example.com",
"contact": "9999999999"
,
"notes":
"address": "Autofy"
,
"theme":
"color": "#DF0145"
,
"modal":
"ondismiss": function()
window.parent.postMessage("MODAL_CLOSED","*"); //3
;
var rzp1 = new Razorpay(options);
window.onload = function(e) //1
rzp1.open();
e.preventDefault();
</script>
</body>
</html>
RazorPayWeb.dart
import 'dart:html';
import 'dart:ui' as ui;
//conditional import
import 'package:autofystore/utils/UiFake.dart' if (dart.library.html) 'dart:ui' as ui;
import 'package:flutter/material.dart';
class RazorPayWeb extends StatelessWidget
@override
Widget build(BuildContext context)
//register view factory
ui.platformViewRegistry.registerViewFactory("rzp-html",(int viewId)
IFrameElement element=IFrameElement();
//Event Listener
window.onMessage.forEach((element)
print('Event Received in callback: $element.data');
if(element.data=='MODAL_CLOSED')
Navigator.pop(context);
else if(element.data=='SUCCESS')
print('PAYMENT SUCCESSFULL!!!!!!!');
);
element.requestFullscreen();
element.src='assets/html/payment.html';
element.style.border = 'none';
return element;
);
return Scaffold(
body: Builder(builder: (BuildContext context)
return Container(
child: HtmlElementView(viewType: 'rzp-html'),
);
));
提前感谢。
【问题讨论】：
【参考方案1】：注释掉requestFullscreen():
//element.requestFullscreen();
【讨论】：
感谢您提供答案。您能否编辑您的答案以包括对您的提案的解释？这将帮助未来的读者更好地理解正在发生的事情，尤其是那些不熟悉该语言并努力理解这些概念的社区成员。为什么将其注释掉可以解决问题？以上是关于Flutter Web：使用 HtmlElementView、IFrameElement、registerViewFactory 实现的解决方案在 ios 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章
Flutter - 无法在flutter web中使用动态链接
Flutter：在 web 、android 和 ios 中使用相同的应用程序