在 Flutter iFrame 上检测 URL 变化

Question

我正在尝试使用以下代码在我的网络应用程序中复制 Webview 功能：

iframeElement = IFrameElement()
      ..src = checkoutUrl
      ..style.border = 'none'
      ..width = '800'
      ..height = '400'
      ..onChange.listen((event) {
        print("change");
        print(event.currentTarget);
      })
      ..onLoad.listen((Event event) {
        isLoadingPage = false;
      });
    ui.platformViewRegistry.registerViewFactory(
      'webpage',
      (int viewId) => iframeElement,
    );

我的目标是检测 URL 中的变化，以便我可以使用 Paypal 执行结帐操作。

问题是我似乎无法从听众那里得到任何东西，所以我在成功付款后无法成功重定向到网络应用程序。

Answer 1

我遇到了同样的问题，但我无法通过这种方式解决它，因为正如 dart 文档所说：

唯一可以获得 url 更改和消息的地方是 window，如果它在 iFrame 中则无法访问，或者至少我找不到方法.我的解决方法是使用 url_launcher 打开 link 并将重定向设置回我的网络应用程序。

P.M。尝试使用 BodyElement 而不是 iFrame，然后 window 选项将可用，您可以收听元素中发生的任何事情，但它在加载页面时存在很多问题，这就是我最终决定不使用它的原因。

Answer 2

我在以下指南中找到了执行所需操作的方法：https://itnext.io/flutter-web-razorpay-payment-gateway-integration-792d6e015409

特别是可以监听 iFrame 中的一些变化，但需要的细节很少：

1 - 定义 window.onMessage 省道面

window.onMessage.forEach((element) {
          print('Event Received in callback: ${element.data}');
        });

2 - 创建一个包含您的脚本的 html 文件，将其导入为 src 并使用以下内容将消息发布到您的 parent：window.parent.postMessage("Your data/message","*");

此特定指南适用于 RazorPay，但我也成功地集成了 Paypal，没有任何问题，

在 Flutter iFrame 上检测 URL 变化

Detect URL changes on Flutter iFrame

html

iframe

webview

dart

flutter