Flutter webview_flutter集成Payrexx监听iframe JavaScript事件方法

问题排查与实现方案 #

1. 先修正官方示例的代码错误

你贴的监听代码存在语法错误，会直接导致监听失效：
原错误写法是直接执行了handleMessage函数，没有把函数本身作为回调传入：

// 错误写法，加括号会立即执行函数，返回值作为回调（实际为undefined）
window.addEventListener('message', handleMessage(this), false);

修正为：

// 正确写法，传入函数引用
window.addEventListener('message', handleMessage, false);

同时官方示例依赖jQuery的each方法，如果你的页面没有引入jQuery，需要替换为原生JS遍历逻辑，避免代码执行报错：

function handleMessage(e) {
  if (typeof e.data === 'string') {
    let data = null;
    try {
      data = JSON.parse(e.data);
    } catch (err) {
      return;
    }
    if (data && data.payrexx) {
      // 替换jQuery.each为原生遍历
      for (const [name, value] of Object.entries(data.payrexx)) {
        switch (name) {
          case 'transaction':
            if (typeof value === 'object') {
              if (value.status === 'confirmed') {
                // 支付成功逻辑，可调用Flutter侧通道通知
                window.PayrexxChannel.postMessage(JSON.stringify({status: 'success', data: value}));
              } else {
                // 支付失败/其他状态逻辑
                window.PayrexxChannel.postMessage(JSON.stringify({status: 'fail', data: value}));
              }
            }
            break;
        }
      }
    }
  }
}

2. 正确配置webview_flutter参数

必须开启JavaScript权限，同时注册JS通道接收支付状态回调：

WebView(
  initialUrl: "你的支付页面地址",
  // 必须开启JavaScript支持
  javascriptMode: JavascriptMode.unrestricted,
  // 注册JS通信通道
  javascriptChannels: {
    JavascriptChannel(
      name: 'PayrexxChannel',
      onMessageReceived: (message) {
        // 这里接收JS层传过来的支付状态
        final payStatus = jsonDecode(message.message);
        if (payStatus['status'] == 'success') {
          // 处理支付成功逻辑
        } else {
          // 处理支付失败逻辑
        }
      },
    )
  },
  onPageFinished: (url) {
    // 页面加载完成后再注入监听代码，避免注入时机过早失效
    final injectJs = """
      function handleMessage(e) {
        if (typeof e.data === 'string') {
          let data = null;
          try {
            data = JSON.parse(e.data);
          } catch (err) {
            return;
          }
          if (data && data.payrexx) {
            for (const [name, value] of Object.entries(data.payrexx)) {
              switch (name) {
                case 'transaction':
                  if (typeof value === 'object') {
                    if (value.status === 'confirmed') {
                      window.PayrexxChannel.postMessage(JSON.stringify({status: 'success', data: value}));
                    } else {
                      window.PayrexxChannel.postMessage(JSON.stringify({status: 'fail', data: value}));
                    }
                  }
                  break;
              }
            }
          }
        }
      }
      window.addEventListener('message', handleMessage, false);
    """;
    webViewController.runJavascript(injectJs);
  },
  onWebViewCreated: (controller) {
    webViewController = controller;
  },
)

3. 异常场景排查

如果还是收不到事件，可做以下检查：

• 确认支付流程完成后页面确实会触发postMessage事件
• 开启WebView调试功能，在Chrome浏览器访问chrome://inspect连接设备查看JS控制台日志，确认是否有代码报错、是否触发了message事件
• 如果是直接加载Payrexx网关地址作为顶层页面而非iframe，可尝试把window.addEventListener替换为window.parent.addEventListener

内容的提问来源于stack exchange，提问作者alexdess